В ExtJs 3.3.1 как я могу показать раскрывающийся список ComboBox без щелчка в EditorGrid?

Question

Я использую ExtJs 3.3.1.

В пределах EditorGrid мой «редактируемый» столбец имеет ComboBox в качестве редактора.Как я могу иметь ComboBox всегда показывать для каждой строки?Это значит, что пользователю не нужно нажимать на ячейку, чтобы узнать, что там есть ComboBox.В настоящее время я установил значение clicksToEdit в 1, но я бы хотел установить это значение в 0 (я пытался это сделать).

См. Ниже мой код, чтобы увидеть мою текущую конфигурацию.

Answer 1

Вот решение, которое я придумала.

1. В моей модели столбца я убедился, что столбец, который я делаю "редактируемым", имеет идентификатор.Теперь с каждой ячейкой в ​​этом столбце будет связан класс CSS с именем "x-grid-col- {id}".Идентификатор моего столбца «status», поэтому класс был «x-grid-col-status».

2. Я создал CSS для класса «x-grid-col-status», который устанавливаетвыпадающее изображение стрелки в качестве фона, выровнено вправо.Он также устанавливает курсор на указатель, поэтому пользователь знает, что он может щелкнуть ячейку.

   .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
        });

Answer 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.