`
wangs7345
  • 浏览: 11964 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

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

 
阅读更多

 

做项目遇到,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的值可不用配置。

 

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

 

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

1
1
分享到:
评论

相关推荐

    ExtJs 动态添加表单

    首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉菜单、复选框等。这些字段可以通过`Ext.form.field.Field`基类进行扩展,每个字段都有其...

    ExtJs获取表单元素的值

    ExtJs框架提供了丰富的API来支持这些功能,例如可以使用`isValid()`方法检查表单是否有效,或者使用`add()`和`remove()`方法动态管理表单字段。 ### 五、总结 通过上述介绍,我们可以看到,在ExtJs中获取表单元素...

    extjs-form组件配置参数详解

    - **isDirty()**: 检查表单数据是否被修改过。 - **isValid()**: 执行客户端验证并返回验证结果。 - **load(Object options)**: 执行表单数据加载操作。 - **loadRecord(Record record)**: 从数据记录中加载数据到...

    Extjs4的FormPanel从后台load json数据的要点

    `Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单,并且提供了大量的功能来帮助处理表单数据,如验证、提交以及数据绑定等。 ### 二、...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    extjs4 入门基础,form、grid、tree

    它提供了一整套组件化的用户界面元素,包括表单(Form)、网格(Grid)、树形视图(Tree)等,使得开发者能够创建出功能丰富且交互性强的前端应用。在深入探讨ExtJS 4的基础知识之前,首先确保你已经下载了ExtJS ...

    如何提交Extjs 中的表单

    在事件处理函数中,我们可以通过`action.success`判断提交是否成功,`action.result`包含了服务器返回的信息。`url`参数指定了表单数据的提交地址,通常对应Java Web工程中的一个控制器或Servlet。 在Java Web后端...

    ExtJs4.0 表单提交Demo

    - 验证数据完整性,避免无效数据提交,可以使用`form.isValid()`检查表单是否有效。 7. **实际应用** 这样的表单提交示例在实际项目中非常常见,比如用户注册、登录、信息编辑等场景。通过合理的架构设计,可以...

    extjs表单提交例子

    保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...

    ExtJS的表单

    ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已

    extjs-form:使用 Sencha ExtJS 的简单表单

    在“extjs-form:使用 Sencha ExtJS 的简单表单”这个主题中,我们将深入探讨如何利用 ExtJS 创建功能丰富的表单。 首先,让我们了解 ExtJS 表单的基本结构。一个表单通常由若干个字段(Field)组成,每个字段都有...

    EXTJS修改颜色实例源码

    - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单的组件,它允许你添加各种表单元素如文本框、选择框等。 - 在实例中,`title` 属性定义了面板的标题,`frame` 为真表示面板具有边框,`plain` 设置为真让边框更...

    Extjs优化(二)Form表单提交通用实现

    函数内部使用了EXTJS的API进行操作,如`getForm()`用于获取表单对象,`submit()`用于提交表单,并且通过`scope`指定回调函数的上下文,`url`定义了提交的URL,`method`指定了HTTP方法,`params`包含了额外的请求参数...

    extjs动态表单

    ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式,它允许开发者在运行时动态地创建、修改或加载表单组件,以适应不同场景下的数据输入需求。在Web应用开发中,动态表单通常用于处理不...

    这是有关extjs的例子,里面有各种表单的定义,grid的实现

    在这里,ExtJS可能被用作客户端的界面层,与ASP.NET MVC或Web Forms后端进行交互,实现数据的CRUD操作。 通过学习和分析这些示例,开发者可以深入理解如何在实际项目中使用ExtJS构建复杂的表单和Grid,以及如何与...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    extjs3 window窗口修改完退出提示是否保存

    可以通过比较当前表单数据与初始数据来判断是否进行了修改。在EXTJS3中,FormPanel有一个`getForm()`方法,返回一个包含表单字段的Form对象,我们可以获取其`getFieldValues()`来获取当前值。同时,我们需要记录并...

    Extjs 的form load

    ext form 提交表单介绍 个个属性的介绍 两个函数介绍

    learning extjs 中文版 表单提交

    EXTJS的表单(Form)组件是用于收集用户输入数据的容器,它由多个字段(Field)组成,如文本框、选择框、复选框等。每个字段都有自己的验证规则,可以确保用户输入的数据符合要求。表单组件提供了多种布局方式,如...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

Global site tag (gtag.js) - Google Analytics