extjs - 在 ExtJs 3.3.1 中，如何在不单击 EditorGrid 的情况下显示 ComboBox 下拉列表？

Question

我使用的是 ExtJs 3.3.1。

在 EditorGrid 中，我的“可编辑”列有一个 ComboBox 作为其编辑器。如何让组合框始终显示在每一行？这意味着，用户不必单击某个单元格就知道那里有一个组合框。目前，我已将 clicksToEdit 设置为 1，但我希望可以将其设置为 0(我尝试过)。

请参阅下面的一些代码以了解我当前的配置。

var combo = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender: true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'statusId',
            'displayText'],
        data: data
    }),
    valueField: 'statusId',
    displayField: 'displayText'
});

var cm = new Ext.grid.ColumnModel({
    columns: [{
        id: 'orderId',
        header: 'ID',
        dataIndex: 'id',
        width: 50
    }, {
        header: 'Status',
        dataIndex: 'status',
        width: 130,
        editor: (data.length == 1) ? null : combo,
        renderer: Ext.util.Format.comboRenderer(combo)
    }, {
        id: 'orderSummary',
        header: 'Summary',
        dataIndex: 'summary',
        renderer: this.renderSummary
    }]
});

var orderGrid = new Ext.grid.EditorGridPanel({
    store: this.getOrderStore(),
    cm: cm,
    autoExpandColumn: 'orderSummary',
    clicksToEdit: 1
});

Answer 1

这是我想出的解决方案。

1. 在我的列模型中，我确保要设置为“可编辑”的列有一个 ID。该列中的每个单元格现在都有一个与其关联的 CSS 类，名为“x-grid-col-{id}”。我的列 ID 是“status”，因此类是“x-grid-col-status”。

2. 我为“x-grid-col-status”类创建了 CSS，它将下拉箭头图像设置为背景，右对齐。它还将光标设置为指针，以便用户知道他们可以单击该单元格。

   .x-grid3-col-status
   {
       background-image: url(Image/trigger-single.gif);
       background-position: right;
       background-repeat: no-repeat;
       cursor: pointer;
   }
   

3. 接下来，我为 ComboBox 设置一个监听器来监听“焦点”事件。在焦点上，我扩大了下拉菜单。重要的是，我必须将lazyInit:false添加到我的ComboBox配置中，否则当您展开时会出现一个空列表。 lazyInit - true 表示在字段聚焦之前不初始化此组合的列表(默认为 true)

代码:

    Ext.util.Format.comboRenderer = function (combo) {
            return function (value, metaData, record, rowIndex, colIndex, store) {
                var record = combo.findRecord(combo.valueField, value);
                return record ? record.get(combo.displayField) : combo.valueNotFoundText;
            }
        }        

    var combo = new Ext.form.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            lazyInit: false,
            lazyRender: true,
            mode: 'local',
            editable: false,
            store: new Ext.data.ArrayStore({
                id: 0,
                fields: [
                    'statusId',
                    'displayText'
                ],
                data: data
            }),
            valueField: 'statusId',
            displayField: 'displayText',
            listeners: {
                'focus': {
                    fn: function (comboField) {
                        comboField.doQuery(comboField.allQuery, true);
                        comboField.expand();
                    }
                    , scope: this
                }
                , 'select': {
                    fn: function (comboField, record, index) {
                        comboField.fireEvent('blur');
                    }
                    , scope: this
                }
            }
        });

        var cm = new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
            },
            columns: [
                {
                    id: 'orderId',
                    header: 'ID',
                    dataIndex: 'id',
                    width: 50
                }, {
                    header: 'Status',
                    id: 'status',
                    dataIndex: 'status',
                    width: comboColumnWidth,
                    editor: combo,
                    renderer: Ext.util.Format.comboRenderer(combo)
                }, {
                    id: 'orderSummary',
                    header: 'Summary',
                    dataIndex: 'summary',
                    renderer: this.renderSummary
                }
            ]
        });

        var orderGrid = new Ext.grid.EditorGridPanel({
            store: this.getOrderStore(),
            cm: cm,
            autoExpandColumn: 'orderSummary',
            title: title,
            clicksToEdit: 1
        });