1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    deepsmart is on a distinguished road

      0  

    Default Unanswered: Creating combo box with infinite scroll

    Unanswered: Creating combo box with infinite scroll


    Is there any way to create combo box with infinite scroll, as it is present in grid. Will it be part of future release of ExtJS. Or can Grid be used as a picker in combo so it will get infinite scroll capability.

    Thanks in advance.

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    536
    Answers
    61
    Vote Rating
    70
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    Out of the box, combo does not currently support infinite scroll. I would love to see it implemented though. It does allow for a paging toolbar. Technically you could hack a grid into a picker, but that is not a very pretty solution.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    deepsmart is on a distinguished road

      0  

    Default


    Thanks for reply Tim. Is there any sample available for the same. I am able to use grid as picker in combo box. But on page load it by default loads 200 elements. On filter it fires service call for first page only. Is there anything wrong with the code.

    Code:
    Ext.define('TestApp.form.ComboGrid', {		extend: 'Ext.form.ComboBox',
    		requires: [
    		'Ext.grid.Panel'
    		],
    		alias: ['widget.TestApp.form.ComboGrid'],
    
    
    		createPicker: function() {
    			var me = this,
    			picker,
    			menuCls = Ext.baseCSSPrefix + 'menu',
    			opts = Ext.apply({
    				selModel: {
    					mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
    				},
    				floating: true,
    				hidden: true,
    				ownerCt: me.ownerCt,
    				cls: me.el.up('.' + menuCls) ? menuCls : '',
    				store: me.store,
    				displayField: me.displayField,
    				focusOnToFront: true,
    				pageSize: me.pageSize,
    				hideHeaders: true,
    				verticalScrollerType: {
    					xtype:'paginggridscroller',
    					trailingBufferZone: 20,  // Keep 200 records buffered in memory behind scroll
    					leadingBufferZone: 30
    				},
    				// do not reset the scrollbar when the view refreshs
    				invalidateScrollerOnRefresh: false,
    				// infinite scrolling does not support selection
    				//disableSelection: true,
    				highlightItem: function (item) {					
    				}				
    			}, 
    			me.listConfig, 
    			me.defaultListConfig);
    
    
    		// NOTE: we simply use a grid panel
    		//picker = me.picker = Ext.create('Ext.view.BoundList', opts);
    		picker = me.picker = Ext.create('Ext.grid.Panel', opts);
    
    
    		// hack: pass getNode() to the view
    		picker.getNode = function() {
    			picker.getView().getNode(arguments);
    		};
    
    
    			me.mon(picker, {
    				itemclick: me.onItemClick,
    				refresh: me.onListRefresh,
    				scope: me
    			});
    
    
    			me.mon(picker.getSelectionModel(), {
    				selectionChange: me.onListSelectionChange,
    				scope: me
    			});
    
    
    			return picker;
    		}
    	});

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,084
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    the use of paging in a combobox is available out of the box. you may want to try it if getting a grid to work takes up too much time/effort and if it meets your requirements.

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    deepsmart is on a distinguished road

      0  

    Default


    I want to have infinite grid, instead of paging. Hence, I am trying to integrate grid with combobox. Couple of issues I observed are,
    1. Combo box filter is loading first page only multiple times (21 times)

    2. Whenever page is loaded first 21 pages is loaded in store without any filter. Is there any setting to stop this.

    3. Remote filtering for grid works only for first page. From 2nd page onwards, query string is not passed in url. This is known issue but solutions such as adding 'query; in baseParameter list is not working as baseParam is not avaialable in Ext 4.1.

    Thanks.