Загрузка, пейджинг и фильтрация ComboBoxField (экстреакция) - PullRequest
Новая
       30

Загрузка, пейджинг и фильтрация ComboBoxField (экстреакция)

2 голосов
/ 26 января 2020

Я хочу отобразить данные в комбинированном поле сенчи, однако в наборе данных содержится более 15 000 записей, и не представляется возможным загрузить их все одновременно. То, что я хотел бы сделать, это иметь комбобокс поле sencha extreact:

  1. Загрузить удаленно (restful api)
  2. вернуть подмножество (25 записей), которое можно прокручивать (бесконечная прокрутка - получить следующие 25 и т. д.).
  3. фильтровать данные на основе данных, введенных пользователем. Это будет refre sh данных, а не фильтра того, что уже было извлечено.

Я прочитал документацию и похоже, что мне может понадобиться использовать Ext Js store и proxy но почему-то это не проходит через мой толстый череп :). Любые примеры, которые я обнаружил, имеют настройку прокси, которая требует прямого доступа к API. Я не могу этого сделать, потому что я работаю в рамках, где это невозможно. Все вызовы должны go через функцию asyn c из-за аутентификации, регистрации и других целей. Если у кого-то есть какие-то указатели или примеры, которыми можно поделиться, это было бы очень признательно.

1 Ответ

1 голос
/ 08 февраля 2020

Мне пришлось внести некоторые изменения в нашу систему, но у меня это работает, и я решил поделиться. Я должен отдать должное этой теме за то, что она указала мне правильное направление. Простите меня заранее за проблемы с форматированием.

  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;
    }

Ниже приведен мой конфиг 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})
          }
        }
      }

В любом случае, есть некоторые причуды, которые я пытаюсь выяснить, например, когда значение выбирается из списка, затем вы нажимаете на стрелку триггера / выпадающего меню, которую отображает сборщик, и немедленно исчезает, а поле ввода в поле со списком очищается. Я вижу вызов на сервер и возвращаемые данные, но не могу понять, что происходит. Надеюсь, это кому-нибудь поможет.

...