ComboBox using Grid instead of BoundList

[alexliang]

Correct one problem about grid instead of BoundList, when we click the grid combo box first time, it can't show all the items, it is because combo box refresh doesn't call, since we need listen the 'refresh' event in grid view instead of grid panel.
the test environment is extjs4 and chrome.


Ext.define('PVE.form.ComboGrid', { extend: 'Ext.form.ComboBox', requires: [ 'Ext.grid.Panel' ], alias: ['widget.PVE.form.ComboGrid'], // copied from ComboBox 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: false, pageSize: me.pageSize }, 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.getView(), {
refresh: me.onListRefresh,
scope:me
});
me.mon(picker, { itemclick: me.onItemClick,// refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { selectionChange: me.onListSelectionChange, scope: me }); return picker; }});

[alexliang]

Update for the wrong code format, here is the my new code:

Ext.define('PVE.form.ComboGrid', {
    extend: 'Ext.form.ComboBox',
    requires: [
    'Ext.grid.Panel'
    ],
    alias: ['widget.PVE.form.ComboGrid'],


    // copied from ComboBox 
    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: false,
            pageSize: me.pageSize
        }, 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.getView(), {
        refresh: me.onListRefresh,
        scope:me
    });
        me.mon(picker, {
            itemclick: me.onItemClick,
//            refresh: me.onListRefresh,
            scope: me
        });


        me.mon(picker.getSelectionModel(), {
            selectionChange: me.onListSelectionChange,
            scope: me
        });


        return picker;
    }
});

[vipinmohit_sencha]

this thread is very nice, I could get 1 grid in drop down typeahead but I need to show two set of informations in 2 grids.
kindly help..thanks

- Vipin Mohit

[Chrischan]

I think there is a little bug in the code.

I think this piece

// hack: pass getNode() to the view
picker.getNode = function() {
    picker.getView().getNode(arguments);
}

should be like this:

// hack: pass getNode() to the view
picker.getNode = function() {
    picker.getView().getNode.apply(picker.getView(), arguments);
}

Otherwise the function will get the arguments array as first parameter (please correct me if I'm wrong).

[ralfius]

Has anybody tried to use pagging for such a grid inside combobox? I have some problem with scrollbar and pagging toolbar that disappear when "next page" or "refresh" buttons are pressed

[sankarbaluz]

Great Work....I have noticed one issue in this ComboGrid that if we will press the down key arrow,its telling d is undefined.When I clicked inside the grid,then only I am able to select the rows in the grid.Otherwise it will show error as d is undefined.Please help me on this issue.

[pdubey]

after entering text into text field, you can simply set the value in tree's store proxy property in which u have to configure extraParams property. in this
proxy :{
extraParams :{
test : null
}
}
to get this like this : treepanel.store.proxy.extraParams.test = textfieldvalue
do this on beforeload event of treepanel
in this way u can filter a tree.

• 
  

[hjones]

Great Work....I have noticed one issue in this ComboGrid that if we will press the down key arrow,its telling d is undefined.When I clicked inside the grid,then only I am able to select the rows in the grid.Otherwise it will show error as d is undefined.Please help me on this issue.

You need to override the Combo's onExpand method and replace the BoundListKeyNav implementation with one thats Grid or Tree friendly.

[ralfius]

Hello,
you can also customize BoundList using XTemplate so that it can be like a grid. All functionality of BoundList will still be present (keys support, pagging, selection etc.)
Example of xtemplate:

myCombobox.tpl = new Ext.XTemplate('<table class="x-grid-table" width="100%" >',
    '<tr class="x-grid-row">',
        '<th><div class="x-column-header x-column-header-inner">' + column1Name + '</div></th>',
        '<th><div class="x-column-header x-column-header-inner">' + column2Name + '</div></th>',
    '</tr>',
    '<tpl for=".">',
        '<tr class="x-boundlist-item">',
            '<td><div class="x-grid-cell x-grid-cell-inner">{' + property1Name + '}</div></td>',
            '<td><div class="x-grid-cell x-grid-cell-inner">{' + property2Name + '}</div></td>',
        '</tr>',
    '</tpl>',
'</table>');

Unfortunately such 'fake grid' doesn't allow column headers to stay when BoundList is scrolled down and up. Also, there is no grid's column sorting.

[batman3000]

If this is so "simple", then how do you add a grid/tree panel as picker that properly handles key events?

Just overriding createPicker() results in a grid panel whose rows can only be selected with the mouse