Javascript 在 ExtJS 中突出显示/选择网格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8716873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlighting/Selecting grid row in ExtJS
提问by Shreya Pandit
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.
我是 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
The data from the datastore is loaded & displayed properly but just the row is not highlighted. Can anyone tell me where I went wrong?
数据存储中的数据已加载并正确显示，但仅该行未突出显示。谁能告诉我我哪里出错了？
回答by Li0liQ
There is no getRowmethod in Ext.grid.GridPanel. However, there is one in Ext.grid.GridView.
中没有getRow方法Ext.grid.GridPanel。但是，在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:
要执行行选择，您正在使用网格的 SelectionModel：
grid.getSelectionModel().selectRow(0)
回答by Abel ANEIROS
Component: Ext.grid.Panel
组件：Ext.grid.Panel
Version: 4.0.0
版本：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);
回答by Malissa
To select a row at a particular index, use the selection model.
要选择特定索引处的行，请使用选择模型。
Ext.grid.GridPanel.getView().getSelectionModel().select(index);
回答by Vivek Kapoor
In Sencha 7 you can select a particular row by grid.setSelection(item);
在 Sencha 7 中，您可以通过 grid.setSelection(item); 选择特定的行；
Ref https://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-setSelection
参考https://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-setSelection
