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格式验证

点击按钮后

时间: 2024-10-11 07:37:17

Ext.form.Layout布局--column布局的相关文章

ExtJs2.0里Ext.form.Radio水平排列布局

ExtJs2.0好像不支持单选框组,因此用两个name相同单选框来实现单选框组 var radio1 = new Ext.form.Radio({boxLabel:'男',name:'sex',id:'yes',inputValue:'0',width : 150, height : 20}); var radio2 = new Ext.form.Radio({boxLabel:'女',name:'sex',id:'no',inputValue:'1', width : 150,height :

Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

 [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   3.Android 布局学习之--LinearLayout的layout_weight属性   4.Android 布局学习之--LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局參数): 在XML文件里,我们常常看到类

Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

[Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之——LinearLayout的layout_weight属性   4.Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局参数): 在XML文件中,我们经常看到类似与lay

ext form

/** * 证照编辑 * * @class CertificationForm * @extends Ext.Window */ StudentForm = Ext.extend(Ext.Window, { formPanel : null, constructor : function(a) { Ext.applyIf(this, a); this.initUI(); StudentForm.superclass.constructor.call(this, { layout : "fit&q

ExtJs 第二章,Ext.form.Basic表单操作

1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本展示组件 displayfield Ext.form.FieldContai

Ext JS表单Ext.form.FormPanel

1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自Panel,在Panel的基础上提供与表单相关的各种特性,比如可以指定表单提交的url.指定表单提交方式.是否是二进制提交等:另外FormPanel固定使用form布局,前面关于布局一节中的内容我们说过,form布局也就是专门用于组织包含输入元素的布局. 看下面的代码: 1 Ext.onReady(funct

Ext.form.Panel表单面板

1.Ext.form.FormPanel支持的主要表单组件 ExtJS表单组件 说明 Xtype类型 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本显示组件 displayfield

EXt form属性

配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包括GET.POST params:传递到请求中的参数 url:动作提交的路径 waitMsg:动作执行时显示的等待信息 属性: Action.CLIENT_INVALID:客户端验证错误 Action.CONNECT_FAILURE:通信错误 Action.LOAD_FAILURE:加载数据时,没有

Ext.form.FormPanel定义的参数说明

1.formId : String (可选的)FORM标签的id(默认是自动生成的). 2.labelWidth : Number 标签的宽度.该属性级联于子容器. 3. itemCls : String 关于容器的表单项元素的额外的CSS样式(默认为"",如容器的itemCls有设置的话就用那个值).由于该样式是作用于整个条目容器的,这就会对在内的表单字段.label元素(若有指定)或其他元素只要属于条目内的元素都有效. 此组件只有在Ext.form.FormLayout FormL