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()) {
								// 清空表格頭的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();
							}
						}
					});

                         

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章