做项目遇到,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()); });
相关推荐
首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉菜单、复选框等。这些字段可以通过`Ext.form.field.Field`基类进行扩展,每个字段都有其...
ExtJs框架提供了丰富的API来支持这些功能,例如可以使用`isValid()`方法检查表单是否有效,或者使用`add()`和`remove()`方法动态管理表单字段。 ### 五、总结 通过上述介绍,我们可以看到,在ExtJs中获取表单元素...
- **isDirty()**: 检查表单数据是否被修改过。 - **isValid()**: 执行客户端验证并返回验证结果。 - **load(Object options)**: 执行表单数据加载操作。 - **loadRecord(Record record)**: 从数据记录中加载数据到...
`Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单,并且提供了大量的功能来帮助处理表单数据,如验证、提交以及数据绑定等。 ### 二、...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
它提供了一整套组件化的用户界面元素,包括表单(Form)、网格(Grid)、树形视图(Tree)等,使得开发者能够创建出功能丰富且交互性强的前端应用。在深入探讨ExtJS 4的基础知识之前,首先确保你已经下载了ExtJS ...
在事件处理函数中,我们可以通过`action.success`判断提交是否成功,`action.result`包含了服务器返回的信息。`url`参数指定了表单数据的提交地址,通常对应Java Web工程中的一个控制器或Servlet。 在Java Web后端...
- 验证数据完整性,避免无效数据提交,可以使用`form.isValid()`检查表单是否有效。 7. **实际应用** 这样的表单提交示例在实际项目中非常常见,比如用户注册、登录、信息编辑等场景。通过合理的架构设计,可以...
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
在“extjs-form:使用 Sencha ExtJS 的简单表单”这个主题中,我们将深入探讨如何利用 ExtJS 创建功能丰富的表单。 首先,让我们了解 ExtJS 表单的基本结构。一个表单通常由若干个字段(Field)组成,每个字段都有...
- `Ext.form.FormPanel` 是 EXTJS 中用于创建表单的组件,它允许你添加各种表单元素如文本框、选择框等。 - 在实例中,`title` 属性定义了面板的标题,`frame` 为真表示面板具有边框,`plain` 设置为真让边框更...
函数内部使用了EXTJS的API进行操作,如`getForm()`用于获取表单对象,`submit()`用于提交表单,并且通过`scope`指定回调函数的上下文,`url`定义了提交的URL,`method`指定了HTTP方法,`params`包含了额外的请求参数...
ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式,它允许开发者在运行时动态地创建、修改或加载表单组件,以适应不同场景下的数据输入需求。在Web应用开发中,动态表单通常用于处理不...
在这里,ExtJS可能被用作客户端的界面层,与ASP.NET MVC或Web Forms后端进行交互,实现数据的CRUD操作。 通过学习和分析这些示例,开发者可以深入理解如何在实际项目中使用ExtJS构建复杂的表单和Grid,以及如何与...
### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...
可以通过比较当前表单数据与初始数据来判断是否进行了修改。在EXTJS3中,FormPanel有一个`getForm()`方法,返回一个包含表单字段的Form对象,我们可以获取其`getFieldValues()`来获取当前值。同时,我们需要记录并...
ext form 提交表单介绍 个个属性的介绍 两个函数介绍
EXTJS的表单(Form)组件是用于收集用户输入数据的容器,它由多个字段(Field)组成,如文本框、选择框、复选框等。每个字段都有自己的验证规则,可以确保用户输入的数据符合要求。表单组件提供了多种布局方式,如...
本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...