Extjs - Как показать combobox в столбце Grid

У меня есть gridpanel include date и combo column http://jsfiddle.net/YjYqX/
Но я не хочу, чтобы показывать свою комбо. Я хочу показать свою комбо без щелчка, а не скрывать внутри ячейки, например

enter image description here

и то же самое для столбца даты, например

enter image description here

Я думаю, что chage до clicksToEdit: 0, но не работает

plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]

Как это сделать, спасибо

Ответы

Ответ 1

Единственный способ добиться этого в 4.2x или ниже - использовать пользовательский компонент, такой как столбец com-en Skirtle http://skirtlesden.com/ux/component-column. Этот тип столбца позволит вам вставлять произвольные компонентов в ячейку.

Предстоящая версия ExtJS будет иметь нечто вроде Gadget Grid, что позволит использовать аналогичные функции.

Ответ 2

Комбобокс или датапикер вводятся только после нажатия на ячейку, они просто не существуют в сетке перед щелчком. Способ изменения внешнего вида ячейки заключается в использовании рендерера в столбце. Таким образом, вы можете добавить фальшивый триггеры в качестве фонового изображения или что-то в этом роде.

В ответ на ваш комментарий, вот как вы могли это сделать:

{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdCls = 'fake-combo';

        return value;
    },
    text: 'MyColumn8',
    editor: {
        xtype: 'combobox',
        store: ...
    }
}

Изучите docs для всех параметров рендеринга. Существуют различные классы, которые вы можете указать, и атрибуты, которые будут использоваться DomHelper. Класс css может иметь фоновое изображение, но вы должны поэкспериментировать здесь. Нелегко получить согласованный макет с тем, что вы хотите сделать, но у вас есть полный доступ к div, который отображается в ячейке. Обязательно проверяйте результаты с помощью Firebug или Chrome Dev Tools, он покажет вам, что именно происходит.

Хотя вы можете скриншот combobox и установить его как фоновое изображение. Но лучше не пытайтесь создать combobox в рендерере, это не то, как это работает. Наличие реального combobox для каждой строки является обычным и может повлиять на производительность, если у вас много строк.

Ответ 3

 var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns:
                [
            {
                        header: 'Category',
                        dataIndex: 'CategoryName',
                        editor:
                            {
                                xtype: 'combobox',
                                store: 'categoryStore',
                                displayField: 'CategoryName',
                                valueField: 'CategoryID'
                            }
                    }
                ],
            width: 450,
            renderTo: Ext.getElementById('hede')
        });

Ответ 5

Хорошо, вот полный пример использования Combo Boxes в Sencha EXTJS:

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns:
            [
                {
                    xtype: 'gridcolumn',
                    text: 'UserStatus',
                    dataIndex: 'userstatus',
                    editor: {
                        xtype: 'combobox',
                        allowBlank: false,
                        displayField:'Name',
                        valueField:'Id',
                        queryMode:'local',
                        store: this.getStatusChoicesStore()
                    }
                }
            ],
        width: 450,
        renderTo: Ext.getElementById('hede')
    });

Теперь функция this.getStatusChoicesStore() предоставит нам выбор для этого комбинированного блока (вы можете определить эту функцию в любом месте или просто встроить ее в определение столбцов, для меня это упрощается читать, если я создаю для него функцию):

    getStatusChoicesStore : function() {
        return Ext.create('Ext.data.Store', {
            data : [{Id: 0, Name:"Active"},{Id: 1, Name: "Inactive"}]
        });
    },

Кроме того, более подробную информацию и примеры можно найти здесь.