关于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' }
        ]
    }],

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

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

转载于:https://www.cnblogs.com/MaiJiangDou/p/7374698.html