EXtjs 下fieldset 与colum整合

最新推荐文章于 2025-10-19 19:09:18 发布

原创最新推荐文章于 2025-10-19 19:09:18 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在EXTJS中使用Fieldset与Column结合实现复杂的表单布局，通过示例代码展示具体操作，包括设置labelWidth、frame、items等属性以实现动态调整和美观展示。

EXtjs 下fieldset 与colum整合

var custInfoPanel = new Ext.FormPanel({
    labelWidth: 75, // label settings here cascade unless overridden
    frame:true,
    items: [{
        xtype:'fieldset',
        title: '基础信息',
        collapsible: true,
        autoHeight:true,
        layout:'form',
        items :[{
            layout:'column',
            items:[{
                columnWidth:.3,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.3,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        }]
    }],
    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

效果图如下