关于extjs表单布局的几种方式

一、用column布局

layout:'column',
    defaults:{
        style:'float:left;margin:4px;',
        columnWidth: 0.49,
        msgTarget: 'side'
    },

    defaultType:'textfield',
    fieldDefaults:{
        labelAlign:'right',
        labelWidth:84                                 
    },

    items:[
        {
            allowBlank: false,
            fieldLabel: '上级编码',
            name: 'parentOrganizationCode',
        },
        {
            fieldLabel: '状态',
            name: 'enable',
        },
        {
            allowBlank: false,
            fieldLabel: '组织架构编码',
            name: 'organizationCode'
        },
        {
            allowBlank: false,
            fieldLabel: '组织架构名称',
            name: 'organizationName',
        },
        {
            fieldLabel: '联系人',
            name: 'contactName',
        },
        {
            fieldLabel: '联系方式',
            name: 'contactPhone',
        },
        {
            fieldLabel: '地址',
            name: 'contactAddress',
            columnWidth: 0.98
        },
        {
            fieldLabel: '备注',
            name: 'note',
            columnWidth: 0.98
        }
    ]

二、anchor套hbox布局

items: [{
                xtype: 'fieldset',
                title: 'Your Contact Information',
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Name',
                    layout: 'hbox',
                    combineErrors: true,
                    defaultType: 'textfield',
                    defaults: {
                        hideLabel: 'true'
                    },
                    items: [{
                        name: 'firstName',
                        fieldLabel: 'First Name',
                        flex: 2,
                        emptyText: 'First',
                        allowBlank: false
                    }, {
                        name: 'lastName',
                        fieldLabel: 'Last Name',
                        flex: 3,
                        margin: '0 0 0 6',
                        emptyText: 'Last',
                        allowBlank: false
                    }]
                }, {
                    xtype: 'container',
                    layout: 'hbox',
                    defaultType: 'textfield',
                    margin: '0 0 5 0',
                    items: [{
                        fieldLabel: 'Email Address',
                        name: 'email',
                        vtype: 'email',
                        flex: 1,
                        allowBlank: false
                    }, {
                        fieldLabel: 'Phone Number',
                        labelWidth: 100,
                        name: 'phone',
                        width: 200,
                        emptyText: 'xxx-xxx-xxxx',
                        maskRe: /[\d\-]/,
                        regex: /^\d{3}-\d{3}-\d{4}$/,
                        regexText: 'Must be in the format xxx-xxx-xxxx'
                    }]
                }]
            }

三、column套form布局

 layout: 'column',
    
    defaults: {
        layout: 'form',
        xtype: 'container',
        defaultType: 'textfield',
        style: 'width: 50%'
    },
    
    items: [{
        items: [
            { fieldLabel: 'First Name' },
            { fieldLabel: 'Last Name' },
            { fieldLabel: 'Phone Number' },
            { fieldLabel: 'Email Address' }
        ]
    }, {
        items: [
            { fieldLabel: 'Street Address 1' },
            { fieldLabel: 'Street Address 2' },
            { fieldLabel: 'City, State' },
            { fieldLabel: 'ZIP code' }
        ]
    }],

------------------------------------------------

着急记一下，写的不清楚，有时间再改一下