判断界面内容是否改变 Ext实现

前一段时间的工作中，Leader提出了一个新的功能需求，就是记录界面上所有的是否改动信息，如果界面被改动过，则保存按钮可以使用，否则保存按钮为灰色。At first，这个问题纠结了我很长一段时间，在Ext中也使用了各种个监听函数进行控制，可是效果总是差强人意，和同事商讨了好久，终于找到了一个好办法(我自己认为是个不错的方法，嘿嘿)，再此，记录下来，供以后做参考，也提供给大家参考下。

如果要实现对整个界面的改动监听，我们可以在新建一个多余的store，如下：

Ext.define('HummerApp.store.mashup.MashupFlag', {
    extend	: 'Ext.data.Store',
    requires	: 'HummerApp.model.MashupFlag',
    model		: 'HummerApp.model.MashupFlag',
	data 	: [{layout: '',firstValue: '',secondValue:''}]
});

这三个字段是我项目中需要的，因为这个tab中我需要监听区域，这三个区域中在加载时，需要各自在这个公共的flag store中注册一个初始的值，如：

//当然，这里你也可以设置其他的值，只要你自己能够判断出改值是否被改变过就行
mashupFlag[0].set('layout','false');

然后在加载完成后，将该store提交一下

Ext.getStore('mashup.MashupFlag').commitChanges( );

这样，页面的原始状态我们就能够确定了，那个区域的值被改变过，只需要顺便修改一下flag store中的相应区域的标识就行了，如果值又被改回来了，可以把这个标识在修改为以前的值，这样，我们对这个flag store 进行update（可能你也会使用到remove 和 add）监听就可以控制保存按钮的状态了。怎么样简单了吧？
当然，在你保存成功之后，不要忘记将这个flag store在commit一下，确保当前的状态是原始状态就行了。

不过，什么方法都有他特定的使用范围，对于那种只有很少个store的界面来说，完全没有必要按照这种方式来实现，你完全可以直接对你的store进行监听，设置一个公共的全局标识就行了，我之所以这么做，是因为我需要监听的数据非常分散，不是grid，只是简单的panel 和form 的组合，没有公共的store，因此才采用了这样的方法。如果你也遇到和我相似的情况，可以考虑下这种方法呀，嘿嘿