Loading, paging and filtering ComboBoxField (extreact)

Question

I want to display data in a sencha comboboxfield, however the dataset has 15,000+ records and it is not feasible to load it all at one time. What I would like to do is have the sencha extreact comboboxfield:

1. Load remotely (restful api)
2. return a subset (25 records) that can be scrolled through (infinite scrolling - get next 25 and so on).
3. filter data based on data typed by the user. This would be a refresh of the data not filter what has already been fetched.

I've read through the documentation and sounds like I may need to use ExtJs store and proxy but for some reason it's not getting through my thick skull :). Any examples I have found appear to have the proxy setup that requires you access the api directly. I cannot do this because I'm working within a framework where that is not possible. All calls need to go through an async function due to authentication, logging and other purposed. If anyone has some pointers or examples to share that would be greatly appreciated.

Answer 1

I've had to make some tweaks to our system but I have this working and thought I would share. I have to give credit to this thread for pointing me in the right direction. Forgive me in advance for formatting issues.

1. First off, I couldn't figure out how to get the proxy to call a function so just went with the Ext.data.proxy.Ajax approach. A bit of a work around for me but it works. Here is my store and proxy setup (this is placed into component state):

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

2. The following is my ComboBoxField config (note: I had to use this.handlePickerCreate.bind(this) because the sencha controls don't appear to honor the arrow function binding):

   <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)} />

3. The following is the handlePickerCreate and onScroll functions:

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

Anyway, there are still some quirks that I'm trying to figure out like when a value is selected from the list then you click on the trigger/dropdown arrow the picker displays and immediately disappears and the combobox input field clears out. I see a call being made to the server and data being returned but can't figure out what is happening. Well hope this helps someone.