`
angelbill3
  • 浏览: 256610 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

ExtJS之表单篇(formpanel) 学习总结

 
阅读更多
1、根据值Value改变gridpanel单元格字体颜色
(通过ColumnModel控件的renderer属性)
renderer : function(value) {
	if (value == '0')
		return '正常';
	else if (value == '1')
		return "<span style='color:red;'>注销</span>";
}

参考:http://blog.sina.com.cn/s/blog_647a022e01016ilj.html

2、FORM表单设值
data的值JSON格式为:{"in":"iamin","out":"iamout"}
其中id中的in\out为form表单中的fieldtext id
qForm.getForm().setValues([
    {id:'in',value:data.in},
    {id:'out',value:data.out}    	  
]);


3、将一个文本框改成金额格式,并校验。
在onReady中定义新的vtype:
Ext.onReady(function(){
	//输入框为金额时重新定义
	Ext.apply(Ext.form.VTypes, {
	    money: function (val) {
	        return /^([1-9]\d{0,7}|0)(\.\d{1,2})?$/.test(val);
	    },
	    moneyText: '请输入正确的金额'
	});
});

EXT布局中的文本框新增vtype:
{fieldLabel:'金额',vtype:'money',name:'amount',allowBlank : false}


4、在表单B提交时,顺带将表单A中的参数也提交。
在表单B提交时方法中写:
var otherParams =formA.getForm().getValues(true);
formB.form.submit({
	url:'***',
	method:'POST',
	params : otherParams,
	success:function(form,res){
		alert("success");
	},
	failure:function(form,res){
		alert("fail");	
	}
});
分享到:
评论

相关推荐

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    ExtJs4.0 表单提交Demo

    总结,"ExtJs4.0 表单提交Demo"旨在展示如何在ExtJs 4.0环境中优雅地处理表单数据提交,同时遵循良好的软件设计原则,将显示层和控制层分离。通过理解和实践这个Demo,开发者能够更好地掌握ExtJs 4.0的表单和Ajax...

    ExtJs 动态添加表单

    在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...

    ExtJS的表单

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

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

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    Extjs中常用表单介绍与应用

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

    如何提交Extjs 中的表单

    总的来说,提交ExtJS表单涉及前端的表单构建、事件监听以及后端的接收和处理。确保前后端通信的正确性,理解HTTP请求和响应的机制,以及熟悉ExtJS的API,都是实现这一功能的关键。通过以上步骤,你可以顺利地完成...

    extjs4如何给同一个formpanel不同的url_.docx

    在EXTJS4中,FormPanel是一个非常重要的组件,用于创建包含表单元素的用户界面。在某些场景下,我们可能需要一个FormPanel实例能够根据不同的情况提交到不同的URL。这个问题可以通过灵活地设置和操作FormPanel及其...

    extJs中关于formPanel动态添加组件的验证问题

    这篇博客将探讨如何解决EXT JS中关于FormPanel动态添加组件的验证问题。 首先,让我们理解EXT JS FormPanel的基本结构。一个FormPanel由多个字段(field)组成,每个字段都有自己的验证规则。这些规则可以是简单的...

    轻松搞定Extjs 带目录

    ### 知识点概述 #### 1. Extjs概念与目录结构 Extjs是一个基于JavaScript的框架,用于构建交互式的web应用。...通过学习本书,读者能够全面掌握Extjs的各种特性,进而使用Extjs开发出功能强大、交互良好的Web应用。

    FCKeditor结合extjs实例

    在这个实例中,FCKeditor 和 ExtJS 结合使用,可能是在ExtJS的某个组件(如表单)中嵌入了FCKeditor,以提供一个高级的文本编辑区域。这种结合允许用户在表单提交内容时,享受到类似于桌面应用的文本编辑体验,同时...

    SSH+ExtJs实现表单的增删改查CRUD

    总结来说,SSH+ExtJS实现的CRUD系统结合了Java后端的高效处理能力和JavaScript前端的用户体验优化,通过JSON进行数据交换,实现了对数据库中如“Student”这样的记录进行增、删、改、查的功能。这样的系统设计灵活且...

    EXTJS 3.04包/中文版API/入门学习资料

    中文版API文档对于EXTJS的学习至关重要,它详细解释了每一个类、方法、属性和事件,帮助开发者理解和使用EXTJS的各种功能。例如,了解GridPanel如何配置,如何使用FormPanel提交数据等。 六、EXTJS 3.04入门学习...

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

    总结起来,Sencha ExtJS 提供了强大的表单构建工具,使得创建交互式的、具有验证功能的 Web 表单变得简单。通过理解表单组件、布局、验证规则以及表单提交机制,开发者可以构建出满足各种需求的复杂表单应用。在 `...

    extjs之颜色选择器的使用

    2. **创建表单**:创建一个EXTJS FormPanel,并定义表单字段。 3. **添加ColorField**:在表单字段中添加ColorField 组件,配置其属性,如预设颜色、宽度等。 4. **监听事件**:根据需要添加事件监听器,如在用户...

    ExtJs 登陆框、框架

    在这个事件处理函数中,可以调用FormPanel的submit方法,将表单数据发送到C#后端服务器进行验证。 C#后端通常会提供一个API接口,例如ASP.NET MVC或Web API,接收并处理这些登录请求。服务器端的代码会检查输入的...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...

Global site tag (gtag.js) - Google Analytics