In ExtJs 3.3.1, wie kann ich eine ComboBox Dropdown ohne Klick in EditorGrid anzeigen?

Question

Ich verwende ExtJs 3.3.1.

In einem EditorGrid hat meine "editierbare" Spalte eine ComboBox als Editor. Wie kann ich die ComboBox immer für jede Zeile anzeigen lassen? Das heißt, der Benutzer müsste nicht auf eine Zelle klicken, um zu wissen, dass es dort eine ComboBox gibt. Derzeit habe ich clicksToEdit auf 1 gesetzt, aber ich wünschte, ich könnte dies auf 0 setzen (ich habe versucht, dass).

Nachstehend finden Sie einen Teil meines Codes, um meine aktuelle Konfiguration zu sehen.

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

Hier ist die Lösung, die ich mir ausgedacht habe.

1. In meinem Spaltenmodell habe ich dafür gesorgt, dass die Spalte, die ich "bearbeitbar" machen will, eine ID hat. Jeder Zelle in dieser Spalte wird nun eine CSS-Klasse mit dem Namen "x-grid-col-{id}" zugeordnet. Meine Spalten-ID ist "status", also war die Klasse "x-grid-col-status".

2. Ich habe das CSS für die Klasse "x-grid-col-status" erstellt, das das Bild des Dropdown-Pfeils als rechts ausgerichteten Hintergrund festlegt. Es setzt auch den Cursor auf Zeiger, so dass der Benutzer weiß, dass sie auf die Zelle klicken können.

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

3. Als Nächstes richte ich einen Listener für meine ComboBox ein, der auf das Ereignis "Fokus" wartet. Wenn der Fokus gesetzt wird, wird das Dropdown-Menü erweitert. Es ist wichtig, dass ich lazyInit: false zu meiner ComboBox-Konfiguration hinzufügen musste, da sonst beim Erweitern eine leere Liste angezeigt wird. lazyInit - true, um die Liste für diese Kombination erst zu initialisieren, wenn das Feld fokussiert ist (Standardwert: true)

Der Code:

    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

Ich denke, Sie müssen ein spezielles css zum Kombinationsfeld hinzufügen, das das Dropdown-Symbol anzeigt. Dies ist nativ nicht von Ext JS unterstützt. Hier ist ein Beispiel, wie es getan werden kann:

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

Oder Sie könnten die Ext.grid.TemplateColumn und geben Sie die tpl konfigurieren. Dies erzeugt automatisch einen Renderer für die Zellen in der Spalte und wendet die tpl .