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]
- 浏览: 15937 次
- 性别:
- 来自: 北京
最新评论
发表评论
-
Ext FormPanel表单示例(1)
2013-07-26 17:02 01、简单的FormPanel示例效 ... -
Ext window组件常见属性学习
2013-07-26 15:48 5921、window配置属性 1 ... -
panel组件学习(1)常见属性学习
2013-07-26 15:25 6901) 、panel组件常用属性 因为panel ... -
Ext 学习(3)为tabpanel标签页添加右键菜单
2013-07-26 14:31 954效果图: js代码: Ext.onRea ... -
Ext TabPanel学习(2)-动态添加TabPanel标签
2013-07-25 16:51 14621)、动态添加TabPanel标签效果图[img]http:/ ... -
ext TabPanel学习(1)
2013-07-25 16:51 440效果图:[img]http://dl2.iteye.com/u ...
相关推荐
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
ExtJs中表单formPanel的横向布局
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = ‘under’; //第...
-增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...
8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
//定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...
所以它有着panel的属性 要创建一个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel(); 表单面板和面板一样只是作为一个容器出现的,需要我们使用items加入各控件元素来丰富我们的表单面板, defaults:{}...
下面是一个我遇到问题代码的简化版本,没有经过测试,大概意思是要是在form里想控制不显示表单,用remove()方法有效 代码如下: new Ext.form.FormPanel({ id : ‘ReportForm’,items : [{ {id:”001″}, {id:”002″...
1.4.2 在项目中使用EXT 3 1.5 为什么页面提示"找不到图片" 3 1.6 辅助开发 4 1.6.1 调试工具Firebug 4 1.6.2 开发利器Spket 7 1.7 本章小结 10 第2章 EXT框架基础 11 2.1 EXT的事件和类 11 2.1.1 自定义...
var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:...
formpanel可以这样使用,api上的例子: 代码如下: var panel=Ext.create(‘Ext.form.Panel’, { title: ‘Simple Form’, bodyPadding: 5, width: 350, // 将会通过 AJAX 请求提交到此URL //url: ‘save-form.php’,...
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: ... 具体定义如下: 代码如下: var fp = Ext.create(‘Ext.FormPanel’, { frame: true, fieldDefaults: {
代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...
二、Ext.form.FormPanel类 93 三、提交表单至服务器 97 四、小结 100 第十六章:更多表单组件 102 一、您能说出哪些表单组件呢? 102 二、表单组件关系图 102 三、组件配置选项介绍 103 四、完整源代码 107 五、小结...
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...