`

Ext.FormPanel表单(实例)

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Ext.FormPanel表单</title>
		<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
		<!-- ** Javascript ** -->
		 <!-- ExtJS library: base/adapter -->
		<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
		<!-- ExtJS library: all widgets -->
		<script type="text/javascript" src="ext/ext-all.js"></script>
		<script type="text/javascript" src="formPanel.js"></script>
	</head>
	<body>
	</body>
</html>

 formPanel.js

/**
 * @author zms
 */
Ext.onReady(function(){
	//Ext.MessageBox.alert("123","123");
	
	//脚本验证时 的提示
	Ext.QuickTips.init(); //支持tips提示
	Ext.form.Field.prototype.msgTarget='under';//提示方式 qtip,title,under,side,id
	
	//添加自定义验证
	Ext.apply(Ext.form.VTypes,{
		password:function(val,field){//val指文本值,field指组件
			if(field.confirmTo){//confirmTo为自定义的配置参数,
				var pwd = Ext.get(field.confirmTo);
				return (val == pwd.getValue());
			}
		}
	});
	
	
	var from = new Ext.FormPanel({
		renderTo:Ext.getBody(),
		x:100,y:100,
		floating:true,
		frame:true,//圆角
		autoWidth:true,autoHeight:true, 
		title:"Ext.FormPanel",
		bodyStyle:"padding:5px 5px 0",   //设置内容样式
		
		defaults:{width:200,xtype:"textfield"},
		items:[{//--
			fieldLabel:"UserName",
			allowBlank:false,
			blankText:'UserName Must Be Not Empty'
		},{
			fieldLabel:"PassWord",
			id:"pwd",
			inputType:'password',
			allowBlank:false,
			blankText:'UserName Must Be Not Empty'
		},{//确认密码
			fieldLabel:"确认密码",
			inputType:'password',
			vtype:"password",//使用自定义验证
			vtypeText:"确认密码不同",
			confirmTo:"pwd"//要比效的组件  confirmTo为自定义函数的自定义配置参数
		},{//---表单字段组
			xtype:'fieldset',	
			title:'fieldset(表单字段组)应用实例',
			 collapsible:true,//收缩
			 width:305,
			 defaults:{width:150},//默认的宽度
			 defaultType:'textfield',//默认的类型
			 items:[{
			 	fieldLabel:'爱好', //标题
			 	value:'xuetu'		//值
			 },{//combo选择项(简单)
			 	fieldLabel:'性别(comno)',
			 	xtype:"combo",
			 	store:['男','女','保密'],
			 	emptyText:'请选择性别'
			 },{
			 	fieldLabel:'日期选择项(datefield)',
			 	xtype:"datefield"
			 }]
		},{//--可选的fieldset实例  checkboxToggle:true 呈现一个带checkbox的fieldset
			checkboxToggle:true,
			title:"显示或隐藏",
			xtype:'fieldset',
			width:305,
			html:'checkboxToggle:true'
		}]
	});
});

 

 

 

分享到:
评论

相关推荐

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...

    ext几个实例

    在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例,包括与MySQL数据库的交互。 **1. Ext....

    ExtJs4.0 表单提交Demo

    ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...

    ExtJs_xtype一览

    - `form`:`Ext.FormPanel` 或 `Ext.form.FormPanel`,用于创建表单的容器。 - `checkbox`:`Ext.form.Checkbox`,多选框组件。 - `combo`:`Ext.form.ComboBox`,下拉选择框。 - `datefield`:`Ext.form....

    Ext js Xtype

    - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件,如`Ext.chart.Chart`,`Ext.chart.BarChart`,`Ext....

    Ext2.0 form使用实例的例程

    在这个“Ext2.0 form使用实例的例程”中,我们将深入探讨Ext 2.0的表单(form)组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色,用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...

    Ext2.0 form使用实例

    总的来说,Ext2.0 FormPanel通过更简洁的API和丰富的布局方式,使得构建具有交互性和响应性的表单变得容易。同时,错误提示、验证等功能增强了用户体验。开发者可以根据实际项目需求,灵活运用上述知识来创建符合...

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    方法一是通过直接实例化TextField对象,然后将其添加到FormPanel中。例如: ```javascript var textfield = new Ext.form.TextField({ fieldLabel: ' 用户名 ', emptyText: ' 请输入 ..', allowBlank: false });...

    extJs xtype 类型

    1. **`form`:** 表单面板组件,用于创建表单,通过`Ext.FormPanel/Ext.form.FormPanel`类实现。 2. **`checkbox`:** 多选框组件,通过`Ext.form.Checkbox`类实现。 3. **`combo`:** 下拉框组件,用于创建下拉列表...

    Ext 表单布局实例代码

    `Ext.form.FormPanel`是表单的主要容器,包含了表单的配置,如`labelAlign`设置标签对齐方式('right'表示右对齐),`labelWidth`定义标签的宽度,`title`设置表单标题,`frame`决定是否显示边框,`width`设定表单...

    Ext+JS高级程序设计.rar

    1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 1.1.5 事件处理 9 1.1.6 尺寸大小 13 1.1.7 定位功能 14 1.1.8 动画功能 16 1.1.9 杂项 19 1.2 Ext Core...

    Ext table布局实例 formpanel的table布局

    本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`&lt;table&gt;`...

    ext 学习笔记

    当涉及到表单时,`Ext.getCmp("formId").getForm()`返回一个`Ext.form.FormPanel`实例,这允许开发者进一步操作表单,比如提交表单数据、验证字段等。 ### 数据绑定与组合框操作 在Ext JS中,组合框(`combo`)是一...

    EXT3.2 多选下拉框

    var formPanel = new Ext.form.FormPanel({ items: [multiSelectComboBox], renderTo: Ext.getBody() }); ``` 在上述代码中,我们创建了一个JSON数据存储,并将其与ComboBox关联。设置`multiSelect: true`后,...

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

    在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...

    Ext form_load

    FormPanel内部包含一个`form`对象,该对象是`Ext.form.BasicForm`类型的实例。BasicForm提供了一套方法来处理表单的数据交互,如`load`和`submit`。 3. **doAction方法**: `load`和`submit`方法实质上都是调用`...

    ExtJs入门实例

    ### ExtJs2.0入门实例知识点详解 #### 1. Ext.MessageBox - **Ext.MessageBox.alert()** - **用途**: 显示一个简单的警告框。 - **参数**: - `title` (必需): 弹出框的标题。 - `msg` (必需): 显示的信息。 ...

    extjs控件列表

    **Ext.FormPanel** - **描述**: 表单面板,用于组织和管理表单元素。 - **用途**: 创建复杂的表单,如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框,用于选择一个或多个选项。 - **用途**: 问卷...

    Ext教程表单表格的使用

    【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。在上述代码中,`sampleFormPanel`是一个FormPanel实例,包含了多个配置属性,用于定制表单的行为和...

Global site tag (gtag.js) - Google Analytics