突出显示/选择ExtJS中的网格行 [英] Highlighting/Selecting grid row in ExtJS
问题描述
目前的网格&面板正确显示。即使与所选行相关的数据也显示在面板中,但该行未突出显示。我试过
grid.focusRow(0)
& grid.getRow(0).highlight()
方法,但它们不工作。以下是我的代码。 // js文件代码
initComponent:function(){//在窗口内实例
var single = false;
var store = new Ext.data.XmlStore({//所有必填字段添加}); // store
HttpUtil.syncCall(this.url,GET,this.loadStore,store,this);
var acctTplMarkup = [//这里的字段显示在行选择上];
/ *用于显示所选行的详细信息的模板* /
this.acctTpl = new Ext.Template(acctTplMarkup);
//检查请求类型,如果类型是检查范围,则创建网格
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){//检查窗口实例的id值
grid.getSelectionModel()selectFirstRow();
}) ;
}
}
}); // gridPanel
} // if
/ *如果请求类型为range select,则显示网格* /
...
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
数据存储区的数据已加载;显示正确,但只是该行没有突出显示。谁能告诉我哪里出错?
没有 getRow
方法在 Ext.grid.GridPanel
中。但是, Ext.grid.GridView
中有一个。
要突出显示该行,您应该执行以下操作:
var row = grid.getView()。getRow(0); // Get HtmlElement here
Ext.get(row).highlight(); //获取元素包装器并使用其高亮方法
要执行行选择,您使用的是Grid的SelectionModel :
grid.getSelectionModel()。selectRow(0)
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?
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)
这篇关于突出显示/选择ExtJS中的网格行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!