在 ExtJs 3.3.1 中，如何在没有单击 EditorGrid 的情况下显示 ComboBox 下拉菜单？

Posted 2023-02-26

【中文标题】在 ExtJs 3.3.1 中，如何在没有单击 EditorGrid 的情况下显示 ComboBox 下拉菜单？

【英文标题】：In ExtJs 3.3.1, how can I show a ComboBox drop down without click in EditorGrid?

【发布时间】：2011-09-15 02:47:09

【问题描述】：

我正在使用 ExtJs 3.3.1。

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

【参考方案1】：

这是我想出的解决方案。

在我的列模型中，我确保我正在“可编辑”的列有一个 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;

接下来，我为我的 ComboBox 设置了一个侦听器，用于侦听“焦点”事件。在焦点上，我展开下拉菜单。重要的是我必须在我的 ComboBox 配置中添加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
        );

【参考方案2】：

我认为您需要在显示下拉图标的组合框中添加一个特殊的 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。