ExtJS selection / selection of a grid line

Question

I am new to Ext JS. I work on a grid panel, in which when I select / select any of the rows, then certain data related to the selected row is displayed in the panel below the grid. Also, when the window is loaded, the first should be selected / highlighted by default. The grid and panel are currently displayed correctly. Even the data related to the selected row is displayed in the panel, but the row is not highlighted. I tried methods grid.focusRow(0)and grid.getRow(0).highlight(), but they do not work. Below is my code.

//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

Data from the data warehouse is loaded and displayed correctly, but only the row is not highlighted. Can someone tell me where I was wrong?

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

To select a row at a specific index, use a selection model.

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