ExtJs監聽FormPanel的資料的更新情況

2021-08-31 16:54:41 字數 1614 閱讀 1441

最近專案提出乙個新的需求:

formpanel面板當前資料與初始資料不一致,在關閉這個面板之前,請提示使用者資料已經更新,是否需要儲存,

關閉則丟失之前的配置資料,請確認。這個應該屬於使用者體驗友好性方面的需要

通過分析發現可以通過2個方法實現

1、監聽formpanel每個輸入框值的變化。(下面我們實現的方式)

2、通過繫結乙個record,通過record來監聽值的變化。(這種方式在這裡不做討論)

這個功能是基於

這篇上寫的。

下面我們是一步步來實現這個功能:

第1步:

給每個formpanel的面板上的資料操作控制項新增乙個監聽事件「change」,

(如果在extjs源**,需要在form面板的initfields中的f.add(c);這句**新增下面的**)

其實就是為了面板上每個控制項新增乙個值變化的事件。

c.on('change', function(me, newvalue)  else 

else else

}});

第2步:

獲取formpanel面板資料是否更新的方法

(如果在extjs源**,需要在form面板自定義名為ismodified的方法)

通過迴圈檢視是否有控制項的資料更新,則得到該formpanel的資料已經更新。

在我們關閉formpanel的時候就是使用這個方法去判斷,如果是則彈出乙個友好提示框,提示使用者。

也就是說下面這個方法是我們在外面使用來判斷面板是否資料變化的方法。

ismodified : function() 

} }this.items.each(fn, this);

return ism;

}

第3步:

實現刪除formpanel面板上所有資料操作控制項的值變更標識位的方法

(如果在extjs源**,需要在form面板自定義名為deletemodify的方法)

通過迴圈把標識位全部刪除掉,因為有時候我們使用隱藏來關閉面板,所以在隱藏後應該把標識位刪除位。

要不下次開啟後,這些標識位還存在,這樣就是會導致功能錯誤。

在這裡**如下:

deletemodify : function() 

} }

this.items.each(fn, this);

}

第4步:

資料重新初始化後,刪除formpanel面板上所有資料操作控制項的值變更標識位。

(如果在extjs源**,需要在basicform的reset方法中新增這個方法deletemodify();)

這裡執行這個方法也是為了重置後,標識位刪除掉後,關閉面板時就不用提示。

在這裡**如下:

onreset : function()  else 

}

上面就是全部實現這個功能的**。如果想看效果可以把這些**重寫到form,basicform這2個面板中即可。

當然也可以在我上面提到的「extjs自定義帶form功能的window

」這個功能的基礎上新增,直接把這些**貼上到這個功能的**裡即可。

31 ExtJs4回車事件監聽

監聽表單字段事件 ext使得對使用者某個動作的監聽特別簡單,諸如單擊某個元素或者按下某個鍵盤上的鍵。乙個經常性的任務就是監聽回車按鍵,然後提交表單,讓我們看如何完成這一任務 xtype textfield fieldlabel title name title allowblank false,li...

ExtJS監聽鍵盤事件 回車鍵實現登入功能

首先,我們定義乙個表單,如下 ext.define demo.view.viewport items bbar 然後,對密碼框設定監聽事件,ext.define demo.controller.controller userlogin function b,e,eopts extjs鍵盤事件詳解 1...

extjs元件新增事件監聽的三種方式

extjs對元件新增監聽的三種方式 list 在定義元件的配置時設定 list 如 中所示 xtype textarea name datasetfield labelseparator fieldlabel hidelabel true,allowblank true,height mainpan...