Creating combo box with infinite scroll

[deepsmart]

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.

[Tim Toady]

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.

[deepsmart]

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.

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

[Farish]

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.

[deepsmart]

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.