ExtJs如何判断form表单是否被修改过

表单修改状态检测与配置

最新推荐文章于 2021-02-25 23:59:28 发布

最新推荐文章于 2021-02-25 23:59:28 发布 · 492 阅读

ExtJs 同时被 2 个专栏收录

6 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了如何使用ExtJS框架中的BasicForm组件来检测表单修改状态，并解释了trackResetOnLoad配置的作用及使用场景。通过示例代码演示了在不同情况下如何正确配置并获取表单修改状态。

做项目遇到，form表单提交时要判断form是否被修改过，经查API得知：

BasicForm中有事件可监听到。

    /**
     * 表单加载后，一旦有任何一个表单元素被修了，就返回真。
     * Returns true if any fields in this form have changed since their original load.
     * @return Boolean
     */
    isDirty : function(){
        var dirty = false;
        this.items.each(function(f){
           if(f.isDirty()){
               dirty = true;
               return false;
           }
        });
        return dirty;
    }

但是实际测试时无论是否改变form内的值，form.getForm().isDirty()返回全是true。

再查API发现，原来在BasicForm还有个配置起关键作用：

    /**
     * @cfg {Boolean} trackResetOnLoad 
     * 如果为true，则表单对象的form.reset()方法重置到最后一次加载的数据或setValues()数据，以相对于一开始创建表单那时的数据。 
     * If set to true, form.reset() resets to the last loaded or setValues() data instead of when the form was first created.
     */
    trackResetOnLoad : false,

再次验证form.getForm().isDirty()，达到预期。

trackResetOnLoad是在form表单load数据的时候是否记录字段原始值的开关。

在setVlaues中会根据这个开关进行判断，如果为true就记录这个数据。

    setValues : function(values){
        if(Ext.isArray(values)){ // array of objects
            for(var i = 0, len = values.length; i < len; i++){
                var v = values[i];
                var f = this.findField(v.id);
                if(f){
                    f.setValue(v.value);
                    if(this.trackResetOnLoad){
                        f.originalValue = f.getValue();
                    }
                }
            }
        }else{ // object hash
            var field, id;
            for(id in values){
                if(typeof values[id] != 'function' && (field = this.findField(id))){
                    field.setValue(values[id]);
                    if(this.trackResetOnLoad){
                        field.originalValue = field.getValue();
                    }
                }
            }
        }
        return this;
    }

PS：

1、以上适用于类似于新增打开的form判断。如果是类似点击修改的操作，必须修改

form的originalValue，在loadRecord数据后，再次给原始值复制：

       form.getForm().items.each(function(f){
            f.originalValue=String(f.getValue()); 
        });

2、如果form不是通过setValues或loadRecord来赋值，而是单个组件分别赋值trackResetOnLoad的值可不用配置。

原创文章，码字不易，转载请注明出处，谢谢。

ExtJs如何判断form表单是否被修改过

永久链接: http://wangs7345.iteye.com/blog/2153391