(十三) 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();  
 });