If you do not need a heavy grid component as a ComboBox picker, you can always modify the BoundList XTemplate to present the data as table. Of course you will not have all the features which are presented in grid e.g. renderers, checkbox selection model, filtering etc. and you will have to work on cross browsers problem but it costs the efforts in some cases.

In this sample I have extended the ‘Ext.form.field.ComboBox’ and ‘Ext.view.BoundList’ to inject the column model and override the default templates. I have not worked on the CSS of the html table because it is only HowTo blog and I am not going to present here ready to use plugins for your projects.

Ext.define('app.ux.form.field.GridBoundList', {
    extend: 'Ext.view.BoundList',
    alias: 'widget.gridboundlist',

    generateTpl: function () {
        var me = this;

        me.tpl = new Ext.XTemplate(
            '<table style="border-collapse: collapse;">',
                '<thead>',
                    '<tr>' + me.getHeaderTpl() + '</tr>',
                '</thead>',
                '<tbody style="height: 120px; overflow-y: auto;">',
                    '<tpl for=".">',
                        '<tr role="option" unselectable="on" class="x-grid-row ' + me.itemCls + '">' + me.getInnerTpl() + '</tr>',
                    '</tpl>',
                '</tbody>',
            '</table>'
        );
    },

    getHeaderTpl: function() {
        var tpl = [];
        Ext.Array.each(this.columns, function(column) {
            tpl.push('<th class="x-grid-header-ct"><div class="x-column-header-inner">' + column.text + '</div></th>');
        }, this);
        return tpl.join('');
    },

    getInnerTpl: function() {
        var tpl = [];
        Ext.Array.each(this.columns, function(column) {
            tpl.push('<td class="x-grid-cell x-grid-td"><div class="x-grid-cell-inner">{' + column.dataIndex + '}</div></td>');
        }, this);
        return tpl.join('');
    },

    initComponent: function () {
        this.callParent();
    }
});

 

Ext.define('app.ux.form.field.GridComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: ['widget.gridcombobox', 'widget.gridcombo'],
    requires: [
        'Ext.util.DelayedTask',
        'app.ux.form.field.GridBoundList',
        'Ext.data.StoreManager'
    ],

    createPicker: function () {
        var me = this,
            picker,
            pickerCfg = Ext.apply({
                xtype: 'gridboundlist',
                id: me.id + '-gridpicker',
                pickerField: me,
                selectionModel: me.pickerSelectionModel,
                floating: true,
                hidden: true,
                store: me.getPickerStore(),
                displayField: me.displayField,
                preserveScrollOnRefresh: true,
                pageSize: me.pageSize,
                tpl: me.tpl,
                ariaSelectable: me.ariaSelectable,
                columns: me.columns
            }, me.listConfig, me.defaultListConfig);

        picker = me.picker = Ext.widget(pickerCfg);
        if (me.pageSize) {
            picker.pagingToolbar.on('beforechange', me.onPageChange, me);
        }

        // We limit the height of the picker to fit in the space above
        // or below this field unless the picker has its own ideas about that.
        if (!picker.initialConfig.maxHeight) {
            picker.on({
                beforeshow: me.onBeforePickerShow,
                scope: me
            });
        }
        picker.getSelectionModel().on({
            beforeselect: me.onBeforeSelect,
            beforedeselect: me.onBeforeDeselect,
            focuschange: me.onFocusChange,
            scope: me
        });

        picker.getNavigationModel().navigateOnSpace = false;

        return picker;
    },

    initComponent: function () {
        this.callParent();
    }
});