Ext.onReady(function(){
Ext.QuickTips.init();
var form = new Ext.FormPanel({
frame:true,
width:500,
monitorValid:true,//把有formBind:true的按钮与验证绑定
layout:'form',
labelWidth:55,
title:'添加个人信息',
labelAlign:'right',
renderTo:Ext.getBody(),
submit:function() {
this.getEl().dom.action = 'getForm';
this.getEl().dom.method = 'POST';
this.getEl().dom.submit();
},
items:[{
xtype:'panel',
layout:'column', //布局格式，使items里的标签元素在同一行
items:[{
fieldLabel:'用户名',
columnWidth:.5,
layout:'form',//layout:'column'布局格式不显示fieldLabel字段,需要嵌套layout：'form'布局格式
xtype:'textfield',
allowBlank:false,
labelWidth:60,
labelAlign:'right',
blankText:'不能为空，请填写',
name:'userName',
anchor:'90%'
},{
columnWidth:.2,
layout:'form',
labelAlgin:'right',
items:[{
xtype:'radio',
fieldLabel:'性别',
labelWidth:40,
labelAlign:'right',
layout:'form',
boxLabel:'男',
name:'sex',
checked:true,
inputValue:'man',
anchor:'95%'
}]
},{
columnWidth:.3,
layout:'form',
items:[{
xtype:'radio',
boxLabel:'女',
labelSeparator:'',//去除分隔符
name:'sex',
inputValue:'woman',
anchor:'95%'
}]
}]
},{//上面是第一行
xtype:'panel',
layout:'column',
items:[{
columnWidth:.5,
fieldLabel:'出生日期',
xtype:'datefield',
layout:'form',
labelWidth:60,
labelAlign:'right',
name:'birthday',
anchor:'90%'
},{
columnWidth:.5,
layout:'form',
items:[{
labelWidth:40,
xtype:'combo',
name:'degree',
labelAlign:'right',
fieldLabel:'学位',
store:['小学','初中','高中','专科','本科','硕士','博士'],
emptyText:'请选择适合你的学历..',
anchor:'90%'
}]
}]
},{//上面是第二行
xtype:'panel',
layout:'column',
items:[{
columnWidth:.3,
fieldLabel:'使用框架',
labelWidth:60,
labelAlign:'right',
layout:'form',
xtype:'checkbox',
boxLabel:'spring',
name:'spring',
inputValue:'spring'
},{
columnWidth:.2,
layout:'form',
items:[{
xtype:'checkbox',
boxLabel:'struts2',
name:'struts2',
inputValue:'struts2',
anchor:'95%'
}]
},{
columnWidth:.5,
layout:'form',
items:[{
xtype:'checkbox',
boxLabel:'hibernate',
name:'hibernate',
inputValue:'hibernate',
ancher:'95%'
}]
}]
},{//上面是第三行
xtype:'textfield',
fieldLabel:'Email',
labelWidth:60,
labelAlign:'right',
name:'email',
vtype:'email',//email验证
vtypeText:'Email格式错误',
anchor:'56%'//控制文本框长度
},{//上面是第四行
xtype:'textarea',
fieldLabel:'个性签名',
labelWidth:60,
labelAlign:'right',
name:'oneWord',
height:50,
anchor:'95%'
},{//上面是第五行
xtype:'htmleditor',
fieldLabel:'想说的话',
labelWidth:'60',
labelAlign:'right',
name:'wantToSay',
anchor:'95%',
enableAlignments:false,//去除左右对其工具栏
enableLists:false //去除列表工具栏
}],
buttons:[{text:'确定',handler:login,formBind:true},{text:'取消',handler:reset}]
});
function login(){
form.form.submit();
}
function reset(){
form.form.reset();
}
})
效果展示
[img]http://dl2.iteye.com/upload/attachment/0087/3474/c0ebeece-8345-3953-a344-e5e8390ac244.jpg[/img]
wlxt_8436
- 浏览: 17029 次
- 性别:
- 来自: 北京
-
最新评论
- 大小: 33.8 KB
分享到：
发表评论
-
Ext FormPanel表单示例(1)
2013-07-26 17:02 01、简单的FormPanel示例效 ... -
Ext window组件常见属性学习
2013-07-26 15:48 6451、window配置属性 1 ... -
panel组件学习(1)常见属性学习
2013-07-26 15:25 7611） 、panel组件常用属性 因为panel ... -
Ext 学习(3)为tabpanel标签页添加右键菜单
2013-07-26 14:31 991效果图： js代码： Ext.onRea ... -
Ext TabPanel学习(2)-动态添加TabPanel标签
2013-07-25 16:51 15041)、动态添加TabPanel标签效果图[img]http:/ ... -
ext TabPanel学习(1)
2013-07-25 16:51 481效果图：[img]http://dl2.iteye.com/u ...
相关推荐
【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件，它允许用户输入、编辑和验证数据。在上述代码中，`sampleFormPanel`是一个FormPanel实例，包含了多个配置属性，用于定制表单的行为和...
EXT表单，是一种基于JavaScript和Ajax技术的富客户端（Rich Client）表单处理技术，它源自EXT JS库，专门用于构建交互性强、用户体验优秀的Web应用程序。EXT JS是一个强大的JavaScript库，提供了一系列组件化的UI...
首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...
在这个例子中，通过`new Ext.FormPanel`来创建了一个表单面板，并设置了一些关键属性： - `frame`: 设置为`true`，表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
通过以上步骤，你可以实现动态加载Ext表单数据的功能。在实际应用中，可能还需要考虑错误处理、数据验证、动态更新等问题，但以上代码提供了一个基础的实现思路。不断学习和实践，你将能更好地掌握Ext JS在构建动态...
在ExtJS中，我们可以使用`Ext.container.Container`类来创建一个容器，然后设置布局为`form`，以便容纳表单字段。例如： ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...
Ext JS的`Ext.form.Panel`（formpanel）是一个用于创建表单的组件，它可以包含各种输入控件、标签和其他表单元素。在formpanel中使用table布局，可以按照表格的形式组织表单元素，这在处理多列或多行表单布局时非常...
当使用`Ext.FormPanel`的`getForm().submit()`方法进行异步提交时，主要特点是： - **自动处理表单数据**：`getForm().submit()`会自动获取表单内的所有字段值，无需手动构建参数对象。 - **内置验证**：在提交前...
EXT是Sencha公司开发的一款基于JavaScript的富客户端应用框架，它提供了一套完整的组件化UI构建工具，其中EXT表单（FormPanel）是用于创建复杂数据输入和验证的重要部分。在EXT表单中，TextField是最常见的输入控件...
在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例，包括与MySQL数据库的交互。 **1. Ext....
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局，即在一个表单中元素能够按照列分布，形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
FormPanel 是 ExtJS 中的一个核心组件，用于创建和处理表单元素，包括输入字段、按钮、选择框等。它提供了丰富的功能，如数据验证、远程提交、异步加载等，是构建用户交互界面的关键部分。 在ExtJS中，FormPanel是...
本文将深入探讨Ext表单中的`loadRecord`方法，这是一个非常实用的功能，用于将数据记录加载到表单中，以便用户可以查看或编辑。我们将通过`loadRecord`方法的使用场景、工作原理以及示例代码来详细讲解这个知识点。 ...
1. **初始化表单**：首先需要使用EXT创建一个表单对象，该对象将包含所有需要提交的字段。 ```javascript var form = new Ext.form.FormPanel({ id: 'myForm', url: 'yourActionUrl', method: 'POST', items...
在这个“Ext2.0 form使用实例的例程”中，我们将深入探讨Ext 2.0的表单（form）组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色，用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...
本文将详细介绍Ext2.0 FormPanel的使用，包括创建方法、控件配置以及布局管理。 首先，我们需要初始化提示信息功能和设置错误信息显示位置。通过`Ext.QuickTips.init()`启动快速提示功能，以便为表单中的控件提供...
title: 'EXT表单', items: [ {xtype: 'textfield', name: 'username'}, {xtype: 'passwordfield', name: 'password'} ], buttons: [{ text: '提交', handler: function() { formPanel.getForm().submit({ ...
3. **更新验证状态**：如果在表单已经初始化并显示的情况下添加字段，可能需要手动触发FormPanel的验证，可以使用`formPanel.getForm().isValid()`来检查整个表单是否有效。 4. **错误处理**：当验证失败时，EXT JS...