Gridpanel中設定預設選中行的功能實現
今天想把以前的一個東西重做,遇到了在初始化GridPanel時,要根據id把某行設定為預設選擇狀態。在編碼過程中,遇到了兩個問題。
問題1:找不到該id所在行。也就是說,當我想用
var rowCount = backRoleStore.getCount();
for(var i=0;i<rowCount;i++){
if(backRoleStore.getAt(i).get("id") == backRoleId){ //找到此時初始化的行
initRowNo = i;
break;
}
}
來解決鎖定目標行的時候,發現rowCount 得到值是0,也就無法進入迴圈。
產生原因:
我把上面的程式碼放在了backRoleStore.load();之後,但要知道,Ext的load方法是非同步執行,也就是說,load還沒完成,就直接執行到了var rowCount = backRoleStore.getCount();因此必然導致無法拿到值的問題。
解決方法:
將其放在callback當中,callback是load結束後執行的操作
backRoleStore.load(
{callback : function(){
var rowCount = backRoleStore.getCount();
for(var i=0;i<rowCount;i++){
if(backRoleStore.getAt(i).get("id") == backRoleId){ //找到此時初始化的行
initRowNo = i;
break;
}
}
}
});
問題2:
解決了問題1,我開始將此行設定為選中狀態,用backRoleGrid.getSelectionModel().selectRow(initRowNo );發現不報錯,但是沒有一點效果。
原因,網上說渲染方法render也是個需要一個時間的過程,我這樣寫的程式碼,很可能在render結束之前執行,從而導致被後來的render覆蓋。自然也就不是被選中狀態。
解決的思路都是採用一段延遲來進行處理。
解決方法一:
backRoleGrid.store.on({load:function(){
setTimeout(function(){
alert('123')
backRoleGrid.getSelectionModel().selectRow(2);
},500);
}
});
解決方法二:
backRoleGrid.on("render",function(){
backRoleGrid.selModel.selectRow(initRowNo,true);
},this,{delay:100}
);
backRoleGrid.render("backRoleDIV");