CODEWITHSUNDEEP
javascriptextjsgrid
Shreya Pandit
Shreya Pandit

Reputation: 81

Highlighting/Selecting grid row in ExtJS

I am newbie to Ext JS. I am working on a grid panel in which when I select/click 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. Currently the grid & panel is displayed properly. Even the data related to the selected row is displayed in the panel but the row is not getting highlighted. I have tried the grid.focusRow(0) & grid.getRow(0).highlight() methods but they are not working. 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

The data from the datastore is loaded & displayed properly but just the row is not highlighted. Can anyone tell me where I went wrong?

Upvotes: 8

Views: 47577

Answers (4)

Vivek Kapoor
Vivek Kapoor

Reputation: 491

In Sencha 7 you can select a particular row by grid.setSelection(item);

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

Upvotes: 0

Abel ANEIROS
Abel ANEIROS

Reputation: 6464

Component: Ext.grid.Panel

Version: 4.0.0

To select one item and remove previous selection:

grid.getSelectionModel().select(0);

To select one item and keep previous selection:

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

Upvotes: 6

Malissa
Malissa

Reputation: 86

To select a row at a particular index, use the selection model.

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

Upvotes: 1

Li0liQ
Li0liQ

Reputation: 11264

There is no getRow method in Ext.grid.GridPanel. However, there is one in Ext.grid.GridView.

To highlight the row you should do the following:

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

To perform row selection you are using grid's SelectionModel:

grid.getSelectionModel().selectRow(0)

Upvotes: 14

Related Questions