大家都知道,ExtJs的快捷與方便在企業應用的項目中還是優勢巨大的,可是靈活性總是差強人意。
這邊筆記主要記錄下GridPanel複選框和分頁底部工具欄的一些靈活方法,應該算是曲線救國的方法,目前只用到這樣的,希望以後能找到更好的辦法。
情況是這樣的,需求一個GridPanel,自帶複選框列,帶分頁工具。按照模板寫好後發現以下問題:
1、複選款全選按鈕在翻頁時無法刷新勾選狀態。
2、複選框翻頁後無法記錄上頁選中狀態和記錄。
3、刷新按鈕無效。
經過查找資料和詢問,明白了EXT的複選框其實是以DIV樣式圖片來實現的,並不是HTML標籤,所以找到複選框對應的ID,進行手動切換。
綁定時間的入口選取爲Store的load()事件,畢竟,翻頁和刷新,store都是重新laod數據的。問題暫時解決。
以下是示例代碼。
Ext.getCmp(_ID + 'MedicineQueryListGrid').getStore().on("load",
function() {
// 存在詳細信息PANEL時刪除
if (Ext.getCmp('detailpanel') != null) {
Ext.getCmp('detailpanel).destroy();
Ext.getCmp('id_detail')
.doLayout();
}
// 翻頁時清空複選框的頭部全選
var hd_checker = MedicineQueryListGrid.getEl()
.select('div.x-grid3-hd-checker');
var hd = hd_checker.first();
if (hd != null) {
if (MedicineQueryListGrid.getSelectionModel()
.getSelections().length !=
MedicineQueryListGrid.getStore().getCount()) {
// 清空表格頭的checkBox
if (hd.hasClass('x-grid3-hd-checker-on')) {
hd.removeClass('x-grid3-hd-checker-on');
}
} else {
if (MedicineQueryListGrid.getStore().getCount() == 0) { // 沒有記錄的話清空;
return;
}
hd.addClass('x-grid3-hd-checker-on');
MedicineQueryListGrid.getSelectionModel()
.selectAll();
}
}
});