ExtJs筆記1-GridPanel的複選框和工具列事件自定製

          大家都知道，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()) {// 清空表格頭的checkBoxif (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();}}});