加载、分页和过滤 ComboBoxField（提取）

Question

我想在 sencha 组合框字段中显示数据，但是数据集有 15,000 多条记录，一次加载所有记录是不可行的。我想做的是拥有 sencha extreact comboboxfield:

远程加载(restful api)
return 可以滚动的子集（25 条记录）（无限滚动 - 获取下一个 25，依此类推）。
根据用户输入的数据过滤数据。这将刷新数据，而不是过滤已获取的内容。

我已经通读了文档，听起来我可能需要使用 ExtJs 存储和代理，但出于某种原因，它并没有通过我厚厚的头骨:)。我发现的任何示例似乎都具有需要您直接访问 api 的代理设置。我不能这样做，因为我在一个不可能的框架内工作。由于身份验证、日志记录和其他目的，所有调用都需要通过异步函数。如果有人有一些建议或示例可以分享，我们将不胜感激。

Answer 1

我不得不对我们的系统进行一些调整，但我有这个工作，我想我会分享。我必须感谢这个 thread 为我指明了正确的方向。格式问题提前见谅

首先，我无法弄清楚如何让代理调用函数，所以只采用了 Ext.data.proxy.Ajax 方法。对我来说有点变通，但它有效。这是我的商店和代理设置（这是置于组件状态）：

    postalCodes = (props) => { 
            let postalCodeStore = new Ext.data.Store ({
              proxy: {
                  type: 'ajax',
                  url: postalCodesApiRoutes.DROPDOWNDATA, //stores my api route information
                  reader: {
                      type: 'json',
                      rootProperty: 'postalCode',
                      totalProperty: 'totalRecordCount'
                  },
                  pageParam: 'index',
                  extraParams: {
                      pageSize: props.pageSize
                  },
                  headers: { ...authHeader(), // returns my authentication header info
                      <OTHER LOGGING INFO WENT HERE> 
                  },
                  noCache: false
              },
              autoLoad: false,
              pageSize: props.pageSize,
              clearOnPageLoad: false
            })
        return postalCodeStore;
    }

以下是我的 ComboBoxField 配置（注意：我必须使用 this.handlePickerCreate.bind(this) 因为 sencha 控件似乎不支持箭头函数绑定）：

<ComboBoxField displayField="value" valueField="postalCodeId" queryMode="remote" store={this.state.postalCodes} remoteFilter={true} clearable allQuery="" triggerAction="all" // I want when the dropdown clicked on it ignores whats in the combobox text and queries the entire data set. Otherwise if a user types a value a server-side filter will be executed. queryParam="filter" onPickerCreate={this.handlePickerCreate.bind(this)} />
handlePickerCreate和onScroll函数如下：

    handlePickerCreate = (obj, picker) => {
      picker.getScrollable().on('scroll', this.onScroll);
    }

    onScroll = (scroller, x, y, deltaX, deltaY, opts) => {
        if (y >= scroller.getMaxPosition().y) {
          let sStore = this.state.areas;
          if (sStore.getTotalCount() != sStore.getCount()){
            sStore.nextPage({
                callback: function () {
                  scroller.doScrollTo(0, y);
                  console.log('store count', sStore.getCount())
                }
            });

            this.setState({areas: sStore})
          }
        }
      }

无论如何，仍然有一些我想弄清楚的怪癖，比如从列表中选择一个值然后单击选择器显示的 trigger/dropdown 箭头并立即消失并且组合框输入字段清除。我看到正在对服务器进行调用并返回数据，但无法弄清楚发生了什么。希望这对某人有所帮助。

加载、分页和过滤 ComboBoxField（提取）

Loading, paging and filtering ComboBoxField (extreact)

javascript

reactjs

extreact