<!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初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...
在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例，包括与MySQL数据库的交互。 **1. Ext....
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例，然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**：首先，定义一个FormPanel，并在其...
- `form`：`Ext.FormPanel` 或 `Ext.form.FormPanel`，用于创建表单的容器。 - `checkbox`：`Ext.form.Checkbox`，多选框组件。 - `combo`：`Ext.form.ComboBox`，下拉选择框。 - `datefield`：`Ext.form....
- **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件，如`Ext.chart.Chart`，`Ext.chart.BarChart`，`Ext....
在这个“Ext2.0 form使用实例的例程”中，我们将深入探讨Ext 2.0的表单（form）组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色，用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...
总的来说，Ext2.0 FormPanel通过更简洁的API和丰富的布局方式，使得构建具有交互性和响应性的表单变得容易。同时，错误提示、验证等功能增强了用户体验。开发者可以根据实际项目需求，灵活运用上述知识来创建符合...
方法一是通过直接实例化TextField对象，然后将其添加到FormPanel中。例如： ```javascript var textfield = new Ext.form.TextField({ fieldLabel: ' 用户名 ', emptyText: ' 请输入 ..', allowBlank: false });...
1. **`form`:** 表单面板组件，用于创建表单，通过`Ext.FormPanel/Ext.form.FormPanel`类实现。 2. **`checkbox`:** 多选框组件，通过`Ext.form.Checkbox`类实现。 3. **`combo`:** 下拉框组件，用于创建下拉列表...
本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”，帮助开发者更好地理解和运用这两种布局方式。 首先，我们要理解什么是Ext table布局。Ext table布局主要用于显示数据，它基于HTML的`<table>`...
`Ext.form.FormPanel`是表单的主要容器，包含了表单的配置，如`labelAlign`设置标签对齐方式（'right'表示右对齐），`labelWidth`定义标签的宽度，`title`设置表单标题，`frame`决定是否显示边框，`width`设定表单...
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.getCmp("formId").getForm()`返回一个`Ext.form.FormPanel`实例，这允许开发者进一步操作表单，比如提交表单数据、验证字段等。 ### 数据绑定与组合框操作 在Ext JS中，组合框(`combo`)是一...
var formPanel = new Ext.form.FormPanel({ items: [multiSelectComboBox], renderTo: Ext.getBody() }); ``` 在上述代码中，我们创建了一个JSON数据存储，并将其与ComboBox关联。设置`multiSelect: true`后，...
在EXT JS这个强大的JavaScript框架中，FormPanel是用于创建表单的重要组件，它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式，还支持各种表单元素，如文本框、复选框、下拉...
FormPanel内部包含一个`form`对象，该对象是`Ext.form.BasicForm`类型的实例。BasicForm提供了一套方法来处理表单的数据交互，如`load`和`submit`。 3. **doAction方法**： `load`和`submit`方法实质上都是调用`...
### ExtJs2.0入门实例知识点详解 #### 1. Ext.MessageBox - **Ext.MessageBox.alert()** - **用途**: 显示一个简单的警告框。 - **参数**: - `title` (必需): 弹出框的标题。 - `msg` (必需): 显示的信息。 ...
**Ext.FormPanel** - **描述**: 表单面板，用于组织和管理表单元素。 - **用途**: 创建复杂的表单，如用户注册、登录表单。 **Ext.form.Checkbox** - **描述**: 多选框，用于选择一个或多个选项。 - **用途**: 问卷...
【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件，它允许用户输入、编辑和验证数据。在上述代码中，`sampleFormPanel`是一个FormPanel实例，包含了多个配置属性，用于定制表单的行为和...