Dynamic scrolling in combobox ext 4.0

Question

I am using extjs 4.0 and having a combobox with queryMode 'remote'. I fill it with data from server. The problem is that the number of records from server is too large, so I thought it would be better to load them by parts. I know there is a standart paginator tool for combobox, but it is not convinient because needs total number of records.

Is there any way to add dynamic scrolling for combobox? When scrolling to the bottom of the list I want to send request for the next part of records and add them to the list. I can not find appropriate listener to do this.

me1111 · Accepted Answer · 2013-01-18T17:55:00.360

The following is my solution for infinite scrolling for combobox, Extjs 4.0

Ext.define('TestProject.testselect', {
    extend:'Ext.form.field.ComboBox',
    alias: ['widget.testselect'],
    requires: ['Ext.selection.Model', 'Ext.data.Store'],

    /**
     * This will contain scroll position when user reaches the bottom of the list 
     * and the store begins to upload data
     */
    beforeRefreshScrollTop: 0,

    /**
     * This will be changed to true, when there will be no more records to upload
     * to combobox
     */
    isStoreEndReached : false,

    /**
     * The main thing. When creating picker, we add scroll listener on list dom element.
     * Also add listener on load mask - after load mask is hidden we set scroll into position 
     * that it was before new items were loaded to list. This prevents 'jumping' of the scroll.
     */
    createPicker: function() {
        var me = this,
        picker = me.callParent(arguments);
        me.mon(picker, {
            'render' : function() {
                Ext.get(picker.getTargetEl().id).on('scroll', me.onScroll, me);
                me.mon(picker.loadMask, {
                   'hide' : function() {
                      Ext.get(picker.id + '-listEl').scroll("down", me.beforeRefreshScrollTop, false);
                   },
                   scope: me
                });
            },
            scope: me
        });
        return picker;
    },

    /**
     * Method which is called when user scrolls the list. Checks if the bottom of the 
     * list is reached. If so - sends 'nextPage' request to store and checks if 
     * any records were received. If not - then there is no more records to load, and 
     * from now on if user will reach the bottom of the list, no request will be sent.
     */
    onScroll: function(){
        var me = this,
        parentElement = Ext.get(me.picker.getTargetEl().id),
        parentElementTop = parentElement.getScroll().top,
        scrollingList = Ext.get(me.picker.id+'-items');
        if(scrollingList != undefined) {
            if(!me.isStoreEndReached && parentElementTop >= scrollingList.getHeight() - parentElement.getHeight()) {
                var multiselectStore = me.getStore(),
                beforeRequestCount = multiselectStore.getCount();
                me.beforeRefreshScrollTop = parentElementTop;
                multiselectStore.nextPage({
                    params: this.getParams(this.lastQuery),
                    callback: function() {
                            me.isStoreEndReached = !(multiselectStore.getCount() - beforeRequestCount > 0);
                        }
                });
            }
        }
    },

    /**
     * Took this method from Ext.form.field.Picker to collapse only if 
     * loading finished. This solve problem when user scrolls while large data is loading.
     * Whithout this the list will close before finishing update.
     */
    collapse: function() {
        var me = this;
        if(!me.getStore().loading) {
            me.callParent(arguments);
        }
    },

    /**
     * Reset scroll and current page of the store when loading all profiles again (clicking on trigger)
     */
    doRawQuery: function() {
        var me = this;
        me.beforeRefreshScrollTop = 0;
        me.getStore().currentPage = 0;
        me.isStoreEndReached = false;
        me.callParent(arguments);
    }
});

When creating element, should be passed id to the listConfig, also I pass template for list, because I need it to be with id. I didn't find out more elegant way to do this. I appreciate any advice.

{
                    id: 'testcombo-multiselect',
                    xtype: 'testselect',
                    store: Ext.create('TestProject.testStore'),
                    queryMode: 'remote',
                    queryParam: 'keyword',
                    valueField: 'profileToken',
                    displayField: 'profileToken',
                    tpl: Ext.create('Ext.XTemplate',
                        '<ul id="ds-profiles-boundlist-items"><tpl for=".">',
                            '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item' + '">',
                                '{profileToken}',
                            '</li>',
                        '</tpl></ul>'
                    ),
                    listConfig: {
                        id: 'testcombo-boundlist'
                    }
                },

And the store:

Ext.define('TestProject.testStore',{
    extend: 'Ext.data.Store',
    storeId: 'teststore',
    model: 'TestProject.testModel',
    pageSize: 13, //the bulk of records to receive after each upload
    currentPage: 0, //server side works with page numeration starting with zero
    proxy: {
        type: 'rest',
        url: serverurl,
        reader: 'json'
    },
    clearOnPageLoad: false //to prevent replacing list items with new uploaded items
});

+1 for sharing your solution with the community. You should also consider to upvote other answers if they helped you on your way. — sra, Feb 05 '13 at 13:45

score 3 · Answer 2 · answered Sep 05 '14 at 03:06

Credit to me1111 for showing the way.

Ext.define('utils.fields.BoundList', {
    override:'Ext.view.BoundList',
    ///@function utils.fields.BoundList.loadNextPageOnScroll
    ///Add scroll listener to load next page if true.
    ///@since 1.0
    loadNextPageOnScroll:true,
    ///@function utils.fields.BoundList.afterRender
    ///Add scroll listener to load next page if required.
    ///@since 1.0
    afterRender:function(){
        this.callParent(arguments);

        //add listener
        this.loadNextPageOnScroll
        &&this.getTargetEl().on('scroll', function(e, el){
            var store=this.getStore();
            var top=el.scrollTop;
            var count=store.getCount()
            if(top>=el.scrollHeight-el.clientHeight//scroll end
               &&count<store.getTotalCount()//more data
              ){
                  //track state
                  var page=store.currentPage;
                  var clearOnPageLoad=store.clearOnPageLoad;
                  store.clearOnPageLoad=false;

                  //load next page
                  store.loadPage(count/store.pageSize+1, {
                      callback:function(){//restore state
                          store.currentPage=page;
                          store.clearOnPageLoad=clearOnPageLoad;
                          el.scrollTop=top;
                      }
                  });
              }
        }, this);
    },
});

score 2 · Answer 3 · answered Jan 15 '13 at 07:43

2

You can implement the infinite grid as list of the combobox. Look at this example to implement another picker:

http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

answered Jan 15 '13 at 07:43

Johan Haest

4,391
28
37

doesn't suit, infinite scroll grid prevent selection... or there is another way? – me1111 Jan 16 '13 at 11:01
You can disable the selection, I don't think there is another way for you. I have a paged grid inside my combobox, and I had to disable it aswell. – Johan Haest Jan 16 '13 at 11:09
Thanks, but I need selection, that is the problem... Anyway, I tried another way, not sure if this is the best solution but it works. I updated post with details. – me1111 Jan 16 '13 at 17:03
And how do you select an item in the combobox? How do you know which page you need to load? – Johan Haest Jan 17 '13 at 07:37
Nothing prevents selection, I don't use grid at all. It is a simple combobox, so item selection logic is not changed. Store contains currentPage property. It is changed automatically every time when nextPage from store is called. I solved my problems with scroll at last and fixed some bugs that appeared, I will post my entire solution tomorrow I think. If you have remarks, I'll appreciate it. Thanks. – me1111 Jan 17 '13 at 22:47
Ok, I get that it keeps your currentPage. But what if you close your form, and open it later. How would you know which page to load for selection? – Johan Haest Jan 18 '13 at 08:05
I don't need to remember the page, the form is dedicated to perform action on chosen item without remembering it. Probably, I should have mentioned it in my question. – me1111 Jan 18 '13 at 17:52

István · Answer 4 · 2016-03-18T09:24:11.010

If anyone needs this in ExtJS version 6, here is the code:

Ext.define('Test.InfiniteCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: ['widget.infinitecombo'],

    /**
     * This will contain scroll position when user reaches the bottom of the list
     * and the store begins to upload data
     */
    beforeRefreshScrollTop: 0,

    /**
     * This will be changed to true, when there will be no more records to upload
     * to combobox
     */
    isStoreEndReached: false,

    /**
     * The main thing. When creating picker, we add scroll listener on list dom element.
     * Also add listener on load mask - after load mask is hidden we set scroll into position
     * that it was before new items were loaded to list. This prevents 'jumping' of the scroll.
     */
    createPicker: function () {
        var me = this,
            picker = me.callParent(arguments);
        me.mon(picker, {
            'afterrender': function () {
                picker.on('scroll', me.onScroll, me);
                me.mon(picker.loadMask, {
                    'hide': function () {
                        picker.scrollTo(0, me.beforeRefreshScrollTop,false);
                    },
                    scope: me
                });
            },
            scope: me
        });
        return picker;
    },

    /**
     * Method which is called when user scrolls the list. Checks if the bottom of the
     * list is reached. If so - sends 'nextPage' request to store and checks if
     * any records were received. If not - then there is no more records to load, and
     * from now on if user will reach the bottom of the list, no request will be sent.
     */
    onScroll: function () {
        var me = this,
            parentElement = me.picker.getTargetEl(),
            scrollingList = Ext.get(me.picker.id + '-listEl');
        if (scrollingList != undefined) {
            if (!me.isStoreEndReached && me.picker.getScrollY() + me.picker.getHeight() > parentElement.getHeight()) {
                var store = me.getStore(),
                    beforeRequestCount = store.getCount();
                me.beforeRefreshScrollTop = me.picker.getScrollY();
                store.nextPage({
                    params: this.getParams(this.lastQuery),
                    callback: function () {
                        me.isStoreEndReached = !(store.getCount() - beforeRequestCount > 0);
                    }
                });
            }
        }
    },

    /**
     * Took this method from Ext.form.field.Picker to collapse only if
     * loading finished. This solve problem when user scrolls while large data is loading.
     * Whithout this the list will close before finishing update.
     */
    collapse: function () {
        var me = this;
        if (!me.getStore().loading) {
            me.callParent(arguments);
        }
    },

    /**
     * Reset scroll and current page of the store when loading all profiles again (clicking on trigger)
     */
    doRawQuery: function () {
        var me = this;
        me.beforeRefreshScrollTop = 0;
        me.getStore().currentPage = 1;
        me.isStoreEndReached = false;
        me.callParent(arguments);
    }
});

score 0 · Answer 5 · answered Dec 14 '22 at 06:45

First of all thanks to @me1111 for posting the code for dynamic rendering on scroll. That code is working for me after doing a small change.

 tpl: Ext.create('Ext.XTemplate',
                    '<ul id="testcombo-boundlist-items"><tpl for=".">',
                        '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item' + '">',
                            '{profileToken}',
                        '</li>',
                    '</tpl></ul>'
                ),
                listConfig: {
                    id: 'testcombo-boundlist'
                }

in code from <ul id="ds-profiles-boundlist-items"><tpl for="."> i have changed id to "testcombo-boundlist-items". as we defined id as 'testcombo-boundlist' in listConfig.

Before modification, in onScroll method scrollingList = Ext.get(me.picker.id + '-items'); i am getting scrollList as a null. because me.picker.id will return 'testcombo-boundlist' on this we are appending '-items' so it became 'testcombo-boundlist-items' but this id does not exists. so iam getting null.

After modification of id in <ul id="testcombo-boundlist-items"> we have a list object on "testcombo-boundlist-items". so i got a object.

Hope this small change will help.

Dynamic scrolling in combobox ext 4.0

5 Answers5

Linked