(十三) FormPanel组件
FormPanel组件
在web页面中，表单可谓是最常用的控件之一，ext的表单控件同样强悍，且使用非常简单，下面我们实现一个简单的带验证的表单，看以下代码：
Ext.onReady(function(){
Ext.QuickTips.init();//开启表单提示
Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上
var simple = new Ext.FormPanel({//初始化表单面板
labelWidth: 75, // 默认标签宽度
frame:true,//设置表单面板，false为无面板
title: '我的表单',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield', //默认字段类型
items: [{
fieldLabel: '帐户',
name: 'name',
allowBlank:false,//禁止为空
blankText: '帐户不能为空'
},{
fieldLabel: '密码',
name: 'pws',
allowBlank:false,//禁止为空
blankText: '密码不能为空'//可限制多种类型，具体参照api文档
}
],
buttons: [{
text: '登录',
handler:function(){alert("你提交了表单！");}
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
});
simple.render('show');//填充到指定区域
});
<div id="show"></div>
也可以将表单作为窗体的一部分，看以下代码 ：
Ext.onReady(function(){
//Ext.QuickTips.init();//开启表单提示
Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上
var simple = new Ext.FormPanel({//初始化表单面板
labelWidth: 75, // 默认标签宽度板
baseCls: 'x-plain',//不设置该值，表单将保持原样，设置后表单与窗体完全融合
bodyStyle:'padding:5px 5px 0',
width: 350,
border:false,
defaults: {width: 230},
defaultType: 'textfield',//默认字段类型
items: [{
fieldLabel: '帐户',
name: 'name',
allowBlank:false,
blankText: '帐户不能为空'
},{
fieldLabel: '密码',
name: 'pws',
allowBlank:false,//禁止为空
blankText: '密码不能为空'//可限制多种类型，具体参照api文档
}
],
buttons: [{
text: '登录',
handler:function(){alert("你提交了表单！");}
},{
text: '重置',
handler:function(){simple.form.reset();}//重置表单
}]
});
//构建窗体，窗体会在之后具体讲
win = new Ext.Window({
id:'win',
title:'登陆',
layout:'fit',
width:360,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,
closeAction:'close',
closable:false,
collapsible:true,
plain: true,
buttonAlign:'center',
items:simple//作为窗体元素
});
win.show();
});
FormPanel应用示例：
Ext.onReady(function(){
//创建Form面板
var fp = new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
labelWidth:40,
frame:true,
bodyStyle:'padding:8px 0 0 0;',
items:[{
xtype:'textfield',
fieldLabel:'姓名',
name:'n_username',
id:'i_username',
width:320
},{
xtype:'radio',
fieldLabel:'性别',
boxLabel:'男',
name:'sex',
id:'male',
itemCls:'sex-male', //向左边浮动,处理控件横排
clearCls:'allow-float', //允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动
checked:true
},{
xtype:'radio',
boxLabel:'女',
name:'sex',
id:'female',
itemCls:'sex-female', //向左浮动,处理控件横排
clearCls:'allow-float', //允许两边浮动
hideLabel:true //不显示前面"性别"的标签
},{
xtype:'textfield',
fieldLabel:'年龄',
name:'n_age',
id:'i_age',
itemCls:'age-field', //向左浮动,处理控件横排
width:133
},{
xtype:'textfield',
fieldLabel:'住址',
name:'n_address',
id:'i_address',
itemCls:'stop-float', //不允许浮动,结束控件横排
width:320
}],
buttons:[{
text:'确定',
handler:onOK //实际应用一般是处理fp.getForm.submit()事件
}, {
text:'重置',
handler:function(){ fp.getForm().reset(); }
}],
keys:[{ //处理键盘回车事件
key:Ext.EventObject.ENTER,
fn:onOK,
scope:this
}]
});
//确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合
function onOK() {
var strMsg;
strMsg = '姓名：' + fp.getComponent('i_username').getValue() + '，性别：';
if (fp.getComponent('male').checked) strMsg += '男';
if (fp.getComponent('female').checked) strMsg += '女';
strMsg += '，年龄：' + fp.getComponent('i_age').getValue();
strMsg += '，住址：' + fp.getComponent('i_address').getValue();
alert(strMsg);
}
//创建主窗口
new Ext.Window({
title:'Ext中FormPanel面板及Form控件横排测试(CSS)',
width:400,
closable:false,
collapsible:true,
draggable:false,
resizable:false,
modal:true,
border:false,
items:[fp],
buttons:[]
}).show();
});