在ExtJs 3.3.1中，如何在不单击EditorGrid的情况下显示组合框下拉列表？

我正在使用extjs3.3.1

在EditorGrid中，我的“可编辑”列有一个组合框作为其编辑器。如何使组合框始终显示在每行中？这意味着，用户不必单击单元格就知道那里有一个组合框。目前，我已将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
});

---

我认为您需要在显示下拉图标的组合框中添加一个特殊的css。Ext JS本机不支持这一点。下面是一个如何实现的示例：

var companyColumn = {
   header: 'Company Name',
   dataIndex: 'company',
   renderer: function(value, metaData, record, rowIndex, colIndex, store) {
      // provide the logic depending on business rules
      // name of your own choosing to manipulate the cell depending upon
      // the data in the underlying Record object.
      if (value == 'whatever') {
          //metaData.css : String : A CSS class name to add to the TD element of the cell.
          //metaData.attr : String : An html attribute definition string to apply to
          //                         the data container element within the table
          //                         cell (e.g. 'style="color:red;"').
          metaData.css = 'name-of-css-class-you-will-define';
      }
      return value;
   }
}

---

或者您可以使用

Ext.grid.TemplateColumn

并指定

tpl

配置。这将自动为列中的单元格生成渲染器，并应用

tpl

这是我想出的解决办法

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

我为类“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;
}

接下来，我为我的组合框设置了一个侦听器，用于侦听“焦点”事件。关于焦点，我展开下拉列表。重要的是，我必须将lazyInit:false添加到我的组合框配置中，否则在展开时会出现一个空列表。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
        });