Search code examples
javascriptextjscomboboxinfinite-scrollextjs6-modern

extjs 6 modern combobox with infinite scrolling


Based on this comment from mitchellsimoens at sencha forums i tried to implement an infinite scrolling combobox in extjs 6.5.2 modern.

The thing is that setting the combobox store to a virtual store produces this error: Uncaught TypeError: a.setExtraKeys is not a function.

I also set the floatedPicker to:

{
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
    disabled: true
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null
}

Is there a way to implement an infinite scrolling combobox in extjs 6 modern without changing the default picker to a grid?


Solution

  • OK this actually works:

    floatedPicker: {
                xtype: 'boundlist',
                infinite: true,
                // BoundListNavigationModel binds to input field
                // Must only be enabled when list is visible
                navigationModel: {
                    disabled: true
                },
                plugins: {
                    listpaging: {
                        autoPaging: true,
                        loadMoreText: 'More records..',
                        noMoreRecordsText: 'No more records.'
                    }
                },
                scrollToTopOnRefresh: false,
                loadingHeight: 70,
                maxHeight: 300,
                floated: true,
                axisLock: true,
                hideAnimation: null,
                variableHeights: true
            }
    

    It's a bit ugly when loading but it works.

    Also i used an Ext.data.store. Virtual store don't work with comboboxes.