最近在使用带复选框grid 组件的时候发现了一个奇怪的问题,第一次载入这个grid 组件时就给这个grid 组件初始化数据并选中其中的某一项,但始终无法选中,经单步调试发现,选中行的方法已被执行了,只是在所有的东西都执行完后,grid 又刷新了一下,导致原先选中的项丢失。
代码如下:
Js代码
Ext .onReady(function(){
var data = [
['table1','column1','remark1'],
['table2','column2','remark2']
];
var store = new Ext .data.Store({
proxy : new Ext .data.MemoryProxy(data),
reader : new Ext .data.ArrayReader({},[
{name : 'tableName'},
{name : 'columnName'},
{name : 'remark'}
])
});
var databindsm = new Ext .grid .CheckboxSelectionModel({handleMouseDown : Ext .emptyFn,singleSelect : true});
var cm = new Ext .grid .ColumnModel([
new Ext .grid .RowNumberer(),
databindsm,
{header : '表名',dataIndex : 'tableName',width : 145},
{header : '字段名',dataIndex : 'columnName',width : 145},
{header : '备注',dataIndex : 'remark',width : 145}
]);
var grid = new Ext .grid .GridPanel({
width : 570,
height : 240,
loadMark : true,
store : store,
cm : cm,
sm : databindsm
});
var viewport = new Ext .Viewport({
height : 240,
width : 570,
items : [grid ]
});
store.load(data);
alert("aa");
grid .getSelectionModel().selectRow(1,true);
alert("bb");
});
经查发现,原来是ext 的mvc模式在作怪,源码中有如下方法:
Js代码
// private
afterRender : function(){
Ext .grid .GridPanel.superclass.afterRender.call(this);
this.view.layout();
if(this.deferRowRender){
this.view.afterRender.defer(10, this.view);
}else{
this.view.afterRender();
}
this.viewReady = true;
},
在render数据后并没有显示页面,而是延迟渲染view,我们在view后再去选中,虽然设置了选中,但被延迟的渲染覆盖掉了,所以导致逻辑正确而显示不正确的结果。
解决办法:
1、静态store:在grid 中加上一个配置项 deferRowRender:false(不执行默认的render代码);
2、动态store:使用store的load事件,在装载后进行选中
Js代码
grid .store.on("load",function(){
grid .getSelectionModel().selectRow(1,true);
});
From : http://kakarot-java.javaeye.com/blog/504345