ExtJs监听FormPanel的数据的更新情况

最近项目提出一个新的需求：

 

FormPanel面板当前数据与初始数据不一致，在关闭这个面板之前，请提示用户数据已经更新，是否需要保存，

 

关闭则丢失之前的配置数据，请确认。这个应该属于用户体验友好性方面的需要

 

通过分析发现可以通过2个方法实现

 

1、监听FormPanel每个输入框值的变化。（下面我们实现的方式）

 

2、通过绑定一个Record，通过Record来监听值的变化。（这种方式在这里不做讨论）

 

这个功能是基于http://lyndon-lin.iteye.com/blog/1143045 这篇上写的。 

 

下面我们是一步步来实现这个功能：

 

第1步：

 

给每个FormPanel的面板上的数据操作控件添加一个监听事件“change”，

  （如果在ExtJS源代码，需要在Form面板的initFields中的f.add(c);这句代码添加下面的代码）

其实就是为了面板上每个控件添加一个值变化的事件。

c.on('change', function(me, newValue) {
	if (Ext.isObject(newValue)) {//判断这个值是否是对象，如果是对象的话，可以是那些不通过getRawValue得到值的控件，例如RadioGroup
		if (windowForm.record.get(c.id) != newValue.getRawValue()) {//如果新值与初始的值不一样则添加一个isModify的标识位为true
			c.isModify = true;
		} else {
			delete c.isModify;//如果相同则删除掉这个标识位
		}
	 else {
		if (windowForm.record.get(c.id) != newValue) {
			c.isModify = true;
		} else {
			delete c.isModify;
		}
	}
});

 

 

第2步：

 

获取FormPanel面板数据是否更新的方法

 

 （如果在ExtJS源代码，需要在Form面板自定义名为isModified的方法）

 

  通过循环查看是否有控件的数据更新，则得到该FormPanel的数据已经更新。

 

在我们关闭FormPanel的时候就是使用这个方法去判断，如果是则弹出一个友好提示框，提示用户。

 

也就是说下面这个方法是我们在外面使用来判断面板是否数据变化的方法。

 

isModified : function() {
	var isM = false;
	var windowForm = this;
	var fn = function(c) {
	if (windowForm.isField(c)) {
		if (c.isModify == true) {
                                     isM = true;
		}
	}
	}
	this.items.each(fn, this);
	return isM;
}

 

 

第3步：

 

实现删除FormPanel面板上所有数据操作控件的值变更标识位的方法

 

（如果在ExtJS源代码，需要在Form面板自定义名为deleteModify的方法）

 

通过循环把标识位全部删除掉，因为有时候我们使用隐藏来关闭面板，所以在隐藏后应该把标识位删除位。

 

要不下次打开后，这些标识位还存在，这样就是会导致功能错误。

 

在这里代码如下：

 

deleteModify : function() {

      var fn = function(c) {
	if (this.isField(c)) {
		if (c.isModify == true) {
	                               delete c.isModify;
		 }
	}
       }
       this.items.each(fn, this);
}

 

第4步：

 

数据重新初始化后，删除FormPanel面板上所有数据操作控件的值变更标识位。

 

（如果在ExtJS源代码，需要在BasicForm的reset方法中添加这个方法deleteModify();）

 

这里执行这个方法也是为了重置后，标识位删除掉后，关闭面板时就不用提示。

 

在这里代码如下：

onReset : function() {
	this.deleteModify();
	if (this.record) {
		this.loadRecord(this.record);
	} else {
		this.form.reset();
	}
}

 

 

上面就是全部实现这个功能的代码。如果想看效果可以把这些代码重写到Form,BasicForm这2个面板中即可。

 

当然也可以在我上面提到的“ExtJs自定义带Form功能的Window”这个功能的基础上添加，直接把这些代码粘贴到这个功能的代码里即可。