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]
- 浏览: 16800 次
- 性别:
- 来自: 北京
最新评论
发表评论
-
Ext FormPanel表单示例(1)
2013-07-26 17:02 01、简单的FormPanel示例效 ... -
Ext window组件常见属性学习
2013-07-26 15:48 6361、window配置属性 1 ... -
panel组件学习(1)常见属性学习
2013-07-26 15:25 7531) 、panel组件常用属性 因为panel ... -
Ext 学习(3)为tabpanel标签页添加右键菜单
2013-07-26 14:31 984效果图: js代码: Ext.onRea ... -
Ext TabPanel学习(2)-动态添加TabPanel标签
2013-07-25 16:51 14981)、动态添加TabPanel标签效果图[img]http:/ ... -
ext TabPanel学习(1)
2013-07-25 16:51 471效果图:[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.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`及其属性 `...
Ext JS的`Ext.form.Panel`(formpanel)是一个用于创建表单的组件,它可以包含各种输入控件、标签和其他表单元素。在formpanel中使用table布局,可以按照表格的形式组织表单元素,这在处理多列或多行表单布局时非常...
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...