Ext.form.Layout布局--column布局

最新推荐文章于 2024-07-09 18:22:47 发布

三维突破

最新推荐文章于 2024-07-09 18:22:47 发布

阅读量1.4w

点赞数 9

分类专栏： Ext

本文链接：https://blog.csdn.net/shuyizhi/article/details/45671205

版权

Ext 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

//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();
                }
            }
        ]
    });
});

界面效果如下：