1. 程式人生 > >Gridpanel中設定預設選中行的功能實現

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");