StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHighlighting/Selecting grid row in ExtJS
text
Body
copied!<p>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 <code>grid.focusRow(0)</code> & <code>grid.getRow(0).highlight()</code> methods but they are not working. Below is my code.</p> <pre><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 </code></pre> <p>The data from the datastore is loaded & displayed properly but just the row is not highlighted. Can anyone tell me where I went wrong?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload