在 ExtJS 中突出顯示/選擇網格行

Question

我是 Ext JS 的新手。 我正在處理一個網格面板，當我選擇/單擊任何行時，與所選行相關的某些數據會顯示在網格下方的面板中。 此外，在加載窗口時，默認情況下應選擇/突出顯示第一個窗口。 目前網格和面板顯示正確。 即使與所選行相關的數據也顯示在面板中，但該行並未突出顯示。 我嘗試了grid.focusRow(0)和grid.getRow(0).highlight()方法，但它們不起作用。 下面是我的代碼。

//the js file code
initComponent : function() { //within the window instance

    var single = false;
    var store = new Ext.data.XmlStore({//all necessary fields added}); //store
    HttpUtil.syncCall(this.url, "GET", this.loadStore, store,this);
    var acctTplMarkup = [//the fields here are displayed on row selection ];
                /*The template for displaying the details of the selected row */
                 this.acctTpl = new Ext.Template(acctTplMarkup);
    //check for request type, if type is range of checks create the grid
    if (single == false) {
        var gridView = new Ext.grid.GridView();
        var colModel = new Ext.grid.ColumnModel([ {
            header : 'Status',
            dataIndex : 'status'
        }, {
            header : 'Message',
            dataIndex : 'message'
        } ]);
        var selModel = new Ext.grid.RowSelectionModel({
            singleSelect : true
        });
        grid = new Ext.grid.GridPanel({
                                          ...
                        listeners : {
                render : function(grid) {
                    Ext.getCmp('check').store.on('load',function(store, records, options) { //check is the id value for the window instance
                         grid.getSelectionModel().selectFirstRow(); 
                    });
                }
            }
    }); //gridPanel
    } //if
    /* If request type is range select then display the grid  */
                ... 
    if (single == false) {
    grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
Ext.getCmp('check').acctTpl.overwrite(Ext.getCmp('detailPanel').body, r.data);
        }); //rowselect
    } //if

    Ext.apply(this, {
                                     ...
            listeners : {
            'afterrender' : function(){
            Ext.getCmp('check').acctTpl.overwrite(Ext.getCmp('detailPanel').body, this.store.getAt(0).data,true);
            }
        }
    });
    Check.superclass.initComponent.apply(this, arguments);

}, //initComponent

數據存儲中的數據已加載並正確顯示，但僅該行未突出顯示。 誰能告訴我我哪里出錯了？

Answer 1

Ext.grid.GridPanel沒有getRow方法。 但是，在Ext.grid.GridView有一個。

要突出顯示該行，您應該執行以下操作：

var row = grid.getView().getRow(0); // Getting HtmlElement here
Ext.get(row).highlight(); // Getting element wrapper and using its "highlight" method

要執行行選擇，您正在使用網格的 SelectionModel：

grid.getSelectionModel().selectRow(0)

Answer 2

組件： Ext.grid.Panel

版本： 4.0.0

要選擇一項並刪除之前的選擇：

grid.getSelectionModel().select(0);

要選擇一個項目並保留之前的選擇：

grid.getSelectionModel().select(0, true);

Answer 3

要選擇特定索引處的行，請使用選擇模型。

Ext.grid.GridPanel.getView().getSelectionModel().select(index);

Answer 4

在 Sencha 7 中，您可以通過 grid.setSelection(item); 選擇特定的行；

參考https://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-setSelection