最近在使用帶複選框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