Ext.form.Layout佈局--column佈局

//Form Layout佈局
Ext.onReady(function ()
{
    var panel = Ext.create("Ext.form.Panel", {
        width: 550,
        title: "【簡單信息註冊】FormLayout Panel",      
        bodyStyle:"padding:10px 10px 10px 10px",
        labelAlign: "center",
        id:"form",
        renderTo:Ext.getBody(),
        items: [{
            autoHeight: true,
            layout: "column",
            items: [{
                columnWidth:.50,
                xtype: "fieldset",
                title: "個人信息",
                layout: "form",
                style: "margin-left: 2px;padding-left:5px",
                fieldDefaults:{
                    labelWidth:70,
                    labelAlign:"left"
                },
                items: [
                    { fieldLabel: "姓  名", id:"userName", allowBlank: false,xtype:"textfield" },
                    { fieldLabel: "通信地址", id: "userAddress", allowBlank: false,xtype:"textfield" },
                    { fieldLabel: "Email", id: "userEmail", vtype: "email", allowBlank: false,xtype:"textfield" },
                    { fieldLabel: "年  齡", id: "userAge", xtype: "numberfield", maxValue: 100, minValue: 0, allowBlank: false }
                ]
            }, {
                columnWidth: .49,
                xtype: "fieldset",
                title:"企業信息",
                layout: "form",
                style: "margin-left: 5px;padding-left:5px",
                fieldDefaults: {
                    labelWidth: 70,
                    labelAlign: "left"
                },
            items: [
                { fieldLabel: "公司名稱", id: "cmpName", allowBlank: false,xtype:"textfield" },
                { fieldLabel: "公司地址", id: "cmpAddress", allowBlank: false,xtype:"textfield" },
                { fieldLabel: "Email", id: "cmpEmail", vtype: "email", allowBlank: false,xtype:"textfield" },
                { fieldLabel: "註冊時間", id: "cmpRegTime", xtype: "datefield", allowBlank: false,format:"Y-m-d" }
            ]
            }]
        }],
        buttons: [
            {
                text: "確定", handler: function ()
                {
                    var form = Ext.getCmp("form").getForm();
                    if (form.isValid())
                    {
                        var userName = Ext.getCmp("userName").getValue();
                        var userAddress = Ext.getCmp("userAddress").getValue();
                        var userEmail = Ext.getCmp("userEmail").getValue();
                        var userAge = Ext.getCmp("userAge").getValue();

                        var cmpName = Ext.getCmp("cmpName").getValue();
                        var cmpAddress = Ext.getCmp("cmpAddress").getValue();
                        var cmpEmail = Ext.getCmp("cmpEmail").getValue();
                        var cmpRegTime = Ext.getCmp("cmpRegTime").getValue();
                        
                        Ext.MessageBox.alert("提示", "個人註冊信息爲：<br/>" + userName + ",<br/>" + userAddress + ",<br/>" + userEmail + ",<br/>" + userAge + "<br/>企業註冊信息爲:<br/>" +
                            cmpName + ",<br/>" + cmpAddress + ",<br/>" + cmpEmail + ",<br/>" + cmpRegTime);
                    }
                }
            },
            {
                text: "取消", handler: function ()
                {
                    Ext.getCmp("form").getForm().reset();
                }
            }
        ]
    });
});

界面效果如下：

非空驗證

Email格式驗證

點擊按鈕後