場景重現:我需要對用戶的角色修改分配相應的權限,在我加載顯示所有可以選擇的權限的時候,我應該保證告訴用戶我哪些已經是選中的了,哪些是還未選擇的,這樣我就有必要對grid中前面的checkbox展示出選中的效果。如圖:
Checkbox出現的方法:
var sm = Ext.create('Ext.selection.CheckboxModel', {
showHeaderCheckbox: false
});
在xtype:'grid'下添加:
selModel: sm,
multiSelect: true,
去直接實現默認選中的功能是沒有直接的方法的,我們可以通過撇對grid中的stroe的id和獲取到的用戶當前擁有的store中的id獲取到他們說對應於頁面的行號。
/**角色權限分配**/ assinRole: function() { if (role_ListId == null || role_ListId == "") { CommFun.messBox("請選擇相應角色後再操作!", justsyLang.prompt); return; }; var url = "/justsy/role/search/" + role_ListId; //"data/roleID.json"; var view = Ext.widget("Role_Assign"); view.down('form').loadRecord(role_ListObj); //向view的form中添加record //獲取權限的store中的各個id var viewStoreId = Ext.getCmp('assignList').store.data.items; var viewStoreIdList = new Array(); //獲取viewStoreId中的id for (item in viewStoreId) { viewStoreIdList.push(viewStoreId[item].data.id); } //根據id獲取role詳細信息 Ext.Ajax.request({ url: url, method: 'GET', success: function(response) { response = Ext.JSON.decode(response.responseText); if (response.success) { var roleInfoStoreObj = new Object(); //用來存放id查詢詳細信息的數據 var roleInfoStoreIdList = new Array(); var selMod = Ext.getCmp('assignList').getSelectionModel(); roleInfoStoreObj = response.content[0].permissList; console.log(roleInfoStoreObj); //獲取roleInfoStoreId中的id for (items in roleInfoStoreObj) { roleInfoStoreIdList.push(roleInfoStoreObj[items].id); } //循環判斷添加選擇項 for (var i = 0; i < viewStoreIdList.length; i++) { for (var j = 0; j < roleInfoStoreIdList.length; j++) { if (viewStoreIdList[i] == roleInfoStoreIdList[j]) { selMod.select(i, true, false); }; }; }; } } }); view.show(); },
補充說明,我們除了可以通過getSelectionModel下的select通過index選中grid中的row以外,我們也可以通過getSelectionModel下的selectRange進行添加(這個方法是一個添加範圍,當添加的開始點和結束點爲同一個index時候,表示只添加當前index)
Ext.getCmp(id).getSelectionModel().selectRange(startIndex,endIndex,boolen);//boolen表示選中時,之前選中的內容是否清除
對於去除指定grid的row選中我們也可以通過getSelectionModel下的deselectRange進行去除(這裏的deselectRange和之前的selectRange方法的使用是一致的,都是指一個範圍內)