2

我想在 sencha 组合框字段中显示数据，但是数据集有 15,000 多条记录，一次全部加载是不可行的。我想做的是让 sencha 提取组合框字段：

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

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

4

1 回答 1

1

我不得不对我们的系统进行一些调整，但我有这个工作，我想我会分享。我必须赞扬这个线程，因为它为我指明了正确的方向。提前原谅我的格式问题。

  1. 首先，我不知道如何让代理调用函数，所以只使用了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;
    }

  1. 以下是我的 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)} />

  2. 下面是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})
          }
        }
      }

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

于 2020-02-08T18:54:54.330 回答