我是 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
数据存储中的数据已正确加载和显示，但只有该行未突出显示。谁能告诉我哪里出错了？
最佳答案
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)
关于javascript - 在 ExtJS 中突出显示/选择网格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8716873/