ComboBox using Grid instead of BoundList

[dietmar]

It would be nice to use a Grid instead of simple BoundList to render the ComboBox picker. This is currently not possible.

I currently use the following code to implement that feature. Maybe it is possible to integrate that into the standard ComboBox in future releases?

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, {
            itemclick: me.onItemClick,
            refresh: me.onListRefresh,
            scope: me
        });

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

        return picker;
    }
});

[nailuo]

how use it??? and can tree in it?? how ?thank you very much

[dietmar]

how use it??? and can tree in it?? how ?thank you very much

Just use it like a normal ComboBox - pass grid options in 'listConfig', for example:

{ 
    xtype: 'PVE.form.ComboGrid',
    valueField: 'name',
    displayField: 'name',
    store: yourstore,
    listConfig: {
       columns: [
           {
           header: 'Name',
           dataIndex: 'name',
           }
       ]
    }
}

[atian25]

should post as an extension.
so by this way, combotree is coming

[nailuo]

how tree in it?????? i try it by your way.... but hava many errors ..............can you help me ,please

[dietmar]

sorry, I just use the normal grid (no tree).

[evant]

I don't think this is something we'll implement in the core, it's pretty simple to make your own field that extends field.Picker to contain any type of item as the list. The combo contains things specific to just single values.

[chenjinglys]

extjs4 added limitations on the variables, with adjustment of the range of roles in

Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']);

Ext.define("Ext.ux.comboboxtree", {
    extend : "Ext.form.field.Picker",
    requires : ["Ext.tree.Panel"],
    initComponent : function() {
        var self = this;
        Ext.apply(self, {
            fieldLabel : self.fieldLabel,
            labelWidth : self.labelWidth
                // pickerAlign : "tl"//悬浮到其上面
            });
        self.callParent();
    },
    createPicker : function() {
        var self = this;
        var store = Ext.create('Ext.data.TreeStore', {
                    proxy : {
                        type : 'ajax',
                        url : self.storeUrl
                    },
                    sorters : [{
                                property : 'leaf',
                                direction : 'ASC'
                            }, {
                                property : 'text',
                                direction : 'ASC'
                            }]
                });
        self.picker = new Ext.tree.Panel({
                    height : 300,
                    autoScroll : true,
                    floating : true,
                    focusOnToFront : false,
                    shadow : true,
                    ownerCt : this.ownerCt,
                    useArrows : true,
                    store : store,
                    rootVisible : false
                });
        self.picker.on({
                    beforehide : function(p) {
                        var records = self.picker.getView().getChecked(), names = [];
                        Ext.Array.each(records, function(rec) {
                                    names.push(rec.get('text'));
                                });
                        // Ext.MessageBox.show({
                        // title : 'Selected Nodes',
                        // msg : names.join('<br />'),
                        // icon : Ext.MessageBox.INFO
                        // });
                        // alert(names.join(','));
                        self.setValue(names.join(','));
                        p.setVisible(true);// 隐藏树
                    }
                });
        return self.picker;
    },
    alignPicker : function() {
        // override the original method because otherwise the height of
        // the treepanel would be always 0
        var me = this, picker, isAbove, aboveSfx = '-above';
        if (this.isExpanded) {
            picker = me.getPicker();
            if (me.matchFieldWidth) {
                // Auto the height (it will be constrained by min and
                // max width) unless there are no records to display.
                picker.setWidth(me.bodyEl.getWidth());
            }
            if (picker.isFloating()) {
                picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
                // add the {openCls}-above class if the picker was
                // aligned above
                // the field due to hitting the bottom of the viewport
                isAbove = picker.el.getY() < me.inputEl.getY();
                me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
                        + aboveSfx);
                picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
                        + aboveSfx);
            }
        }
    }
});
Ext.onReady(function() {
            var com = Ext.create("Ext.ux.comboboxtree", {
                        storeUrl : 'check-nodes.json',
                        width : 270,
                        fieldLabel : '行政区划',
                        labelWidth : 60,
                        renderTo : 'tree-div'
                    });
        }); 

[ajaxvador]

nice job

[israel.galan]

This is great stuff. I see that the TreeStore cannot be filtered. Is there any way we could filter the tree view as the user types into the field text box?