如何从EXTJS 6.5.2的Multiselector组件读取值

嘿，针对你用的ExtJS 6.5.2 Multiselector组件，这里有几个实用的方法可以读取选中的值，都是项目里常用的：

• 直接调用组件的getValue()方法
  作为表单字段组件，Multiselector继承了Ext.form.field.Field的getValue()方法，这是最直接的方式。结合你的组件配置，代码可以这么写：

  // 通过组件name获取实例
  const multiSelector = Ext.ComponentQuery.query('multiselector[name="Caktohen[]"]')[0];
  // 获取选中的userfullname值数组
  const selectedValues = multiSelector.getValue();
  console.log(selectedValues); // 输出选中的用户全名数组
  

  因为你设置了fieldName: 'userfullname'并且绑定了{userfullname.value}，getValue()返回的就是选中项对应的userfullname字段值组成的数组。

• 从绑定的ViewModel读取数据
  既然你用了MVVM的bind配置，也可以直接从ViewModel中获取绑定的数据，不用额外获取组件实例：

  // 获取组件关联的ViewModel
  const viewModel = Ext.ComponentQuery.query('multiselector[name="Caktohen[]"]')[0].getViewModel();
  // 读取绑定的选中值
  const selectedValues = viewModel.get('userfullname.value');
  

  这种方式更贴合MVVM的架构思路，适合已经基于ViewModel管理数据的场景。

• 获取完整的选中记录（如需更多字段数据）
  如果你需要的不只是userfullname，而是选中项的完整UserModel记录，可以用getSelection()方法：

  const multiSelector = Ext.ComponentQuery.query('multiselector[name="Caktohen[]"]')[0];
  // 获取选中的模型实例数组
  const selectedRecords = multiSelector.getSelection();
  // 提取需要的字段（比如userfullname）
  const selectedNames = selectedRecords.map(record => record.get('userfullname'));
  

  这个方法会返回选中项的Ext.data.Model实例，你可以从中提取任何需要的字段数据。

另外，如果你是在ViewController中操作，推荐用lookupReference()来获取组件实例（前提是给组件配置了reference属性），比ComponentQuery更高效：

// 在ViewController的方法中
const multiSelector = this.lookupReference('myMultiselector');
const selectedValues = multiSelector.getValue();

内容的提问来源于stack exchange，提问作者Nex