ExtJs column与form布局嵌套实现表单重排

2019独角兽企业重金招聘Python工程师标准>>>

var form = new Ext.form.FormPanel({
    title: '通过布局嵌套实现表单横排',
    labelSeparator: '：',//分隔符
    labelWidth: 50,//标签宽度
    bodyStyle: 'padding:5 5 5 5',//表单边距
    frame: false,
    height: 150,
    width: 250,
    layout: 'form',
    items: [
        {
            xtype: 'panel',
            layout: 'column',//嵌套列布局
            border: false,//不显示边框
            defaults: {//应用到每一个子元素上的配置
                border: false,//不显示边框
                layout: 'form',//在列布局中嵌套form布局
                columnWidth: .5//列宽
            },
            items: [
                {
                    labelSeparator: '：',//分隔符
                    items: {
                        xtype: 'radio',
                        name: 'sex',//名字相同的单选框会作为一组
                        fieldLabel: '性别',
                        boxLabel: '男'
                    }
                },
                {
                    items: {
                        xtype: 'radio',
                        name: 'sex',//名字相同的单选框会作为一组
                        hideLabel: true,//横排后隐藏标签
                        boxLabel: '女'
                    }
                }
            ]
        },
        {
            xtype: 'panel',
            layout: 'column',//嵌套列布局
            border: false,//不显示边框
            defaults: {//应用到每一个子元素上的配置
                border: false,//不显示边框
                layout: 'form',//在列布局中嵌套form布局
                columnWidth: .5//列宽
            },
            items: [
                {
                    labelSeparator: '：',//分隔符
                    items: {
                        xtype: 'checkbox',
                        name: 'swim',
                        fieldLabel: '爱好',
                        boxLabel: '游泳'
                    }
                },
                {
                    items: {
                        xtype: 'checkbox',
                        name: 'walk',
                        hideLabel: true,//横排后隐藏标签
                        boxLabel: '散步'
                    }
                }
            ]
        }
    ]
});

效果如下：

转载于:https://my.oschina.net/wangdaoliang/blog/1537645