ExtJS - 如何添加数据以在组合框中存储和过滤

Question

我将组合框添加到我的应用程序中：

  getParticipantsStore() {
      return Ext.create('Ext.data.Store', {
          fields: ['marketName'],
          data: [], // Początkowo puste, dane zostaną załadowane później
  });



const store = this.getStore();

this.add({
  xtype: 'combobox',
  fieldLabel: 'Filter by Market',
  store: store,
  displayField: 'marketName',
  valueField: 'marketName',
  queryMode: 'local',
  multiSelect: true,
  listeners: {
    select: this.onMarketSelect,
    scope: this,
  },
});

this.loadMarketData(store);

我想在此组合框中列出所有市场名称，并按输入的值进行过滤。我想保存选择的每个值，即在组合框中我可以选择多个值。

但是，我根本无法将数据加载到商店中，更不用说通过它进行过滤了。

我是这样下载数据的（数据格式为：

data: {
    data: Array[Array(array containing cells one by one)],
    header: Array[Object]
}

  loadMarketData(store) {
    let dataProvider = this.getDataProvider()

    if (dataProvider) {
      dataProvider.subscription.Resubscribe()
    } else {
      dataProvider = createDataProvider()
      this.setDataProvider(dataProvider)
    }
    this.getDataProvider()
      .DoRequest({
        command: 'GetData',
        tableName: 'market',
      })
      .$.subscribe(
        /** @param {Message} message */
        message => {
          if (Array.isArray(message.data.data)) {
            const marketNames = message.data.data.map(item => ({
              marketName: item[3],
            }));
            store.loadData(marketNames);
          } else {
            Ext.Msg.alert('Error', 'Failed to load data.');
          }
        },
      )

  },

如您所见，我正在尝试通过以下方式将数据加载到商店中：

store.loadData(marketNames);

但我的组合框中没有显示任何内容

如何将数据加载到商店？如何添加一个函数来返回过滤文本，并运行一个函数来请求数据并更新存储？

谢谢你。

Answer 1

您的数据必须如下所示：

[
    { abbr: 'AL', name: 'Alabama' },
    { abbr: 'AK', name: 'Alaska' },
    { abbr: 'AZ', name: 'Arizona' }
]

在 ExtJS 4 中，你的商店应该如下所示：

https://docs.sencha.com/extjs/4.0.0/index.html#!/api/Ext.form.field.ComboBox

要过滤您的商店，请根据字段

selected

添加过滤器。

可以监听change事件并添加

record.set('selected', true)

。这将自动过滤您的商店。

change: function(combobox, newValue, oldValue) {
    var output = myOutput,
        store = comboboxStore;
    
    myOutput.setHtml(myOutput.getHtml() + ', ' + newValue);
    store.findRecord('abbr', newValue).set('selected', true);
}

要允许取消选择值，您可能必须将所有选定的值存储在组合框中，并在每次添加或删除值时构建输出。

在 ExtJS 6+

获得正确格式的数据后，您无需过滤值。只需添加到您的组合框即可：

    multiSelect: true