Ext4.2學習之複選框與單選按鈕複雜控制元件

阿新 • • 發佈：2021-03-22

通過CheckboxGroup和RadioGroup控制元件可以實現複選框和單選框複雜的排列方式了。
比如預設的橫向排列方式

xtype: 'checkboxgroup',
fieldLabel: '自動佈局',
items: [
    {boxLabel: 'Item 1', name: 'cb-auto-1'},
    {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
    {boxLabel: 'Item 3', name: 'cb-auto-3'},
    {boxLabel: 'Item 4', name: 'cb-auto-4' 
},
    {boxLabel: 'Item 5', name: 'cb-auto-5'}
]

在這裡插入圖片描述
通過columns指定列數

{
    xtype: 'checkboxgroup',
    fieldLabel: '單列',
    itemCls: 'x-check-group-alt',
    // 通過colums指定只有1列
    columns: 1,
    items: [
        {boxLabel: 'Item 1', name: 'cb-col-1'},
        {boxLabel: 'Item 2', name: 'cb-col-2', checked: 
 true},
        {boxLabel: 'Item 3', name: 'cb-col-3'}
    ]
}, {
    xtype: 'checkboxgroup',
    fieldLabel: '多列（水平）',
    // 通過columns指定顯示三列
    columns: 3,
    items: [
        {boxLabel: 'Item 1', name: 'cb-horiz-1'},
        {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
        {boxLabel: 
 'Item 3', name: 'cb-horiz-3'},
        {boxLabel: 'Item 4', name: 'cb-horiz-4'},
        {boxLabel: 'Item 5', name: 'cb-horiz-5'}
    ]
}

在這裡插入圖片描述
通過vertical引數指定優先垂直排列

xtype: 'checkboxgroup',
fieldLabel: '多列（豎直）',
itemCls: 'x-check-group-alt',
// 通過columns指定顯示三列
columns: 3,
// 通過vertical設定優先垂直排列
vertical: true,
items: [
    {boxLabel: 'Item 1', name: 'cb-vert-1'},
    {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
    {boxLabel: 'Item 3', name: 'cb-vert-3'},
    {boxLabel: 'Item 4', name: 'cb-vert-4'},
    {boxLabel: 'Item 5', name: 'cb-vert-5'}
]

在這裡插入圖片描述

對應原始碼如下

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function () {
            var form = new Ext.form.FormPanel({
                title: 'checkbox group',
                frame: true,
                width: 1000,
                items: [{
                    xtype: 'checkboxgroup',
                    fieldLabel: '自動佈局',
                    items: [
                        {boxLabel: 'Item 1', name: 'cb-auto-1'},
                        {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
                        {boxLabel: 'Item 3', name: 'cb-auto-3'},
                        {boxLabel: 'Item 4', name: 'cb-auto-4'},
                        {boxLabel: 'Item 5', name: 'cb-auto-5'}
                    ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: '單列',
                    itemCls: 'x-check-group-alt',
                    // 通過colums指定只有1列
                    columns: 1,
                    items: [
                        {boxLabel: 'Item 1', name: 'cb-col-1'},
                        {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
                        {boxLabel: 'Item 3', name: 'cb-col-3'}
                    ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: '多列（水平）',
                    // 通過columns指定顯示三列
                    columns: 3,
                    items: [
                        {boxLabel: 'Item 1', name: 'cb-horiz-1'},
                        {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
                        {boxLabel: 'Item 3', name: 'cb-horiz-3'},
                        {boxLabel: 'Item 4', name: 'cb-horiz-4'},
                        {boxLabel: 'Item 5', name: 'cb-horiz-5'}
                    ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: '多列（豎直）',
                    itemCls: 'x-check-group-alt',
                    // 通過columns指定顯示三列
                    columns: 3,
                    // 通過vertical設定優先垂直排列
                    vertical: true,
                    items: [
                        {boxLabel: 'Item 1', name: 'cb-vert-1'},
                        {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
                        {boxLabel: 'Item 3', name: 'cb-vert-3'},
                        {boxLabel: 'Item 4', name: 'cb-vert-4'},
                        {boxLabel: 'Item 5', name: 'cb-vert-5'}
                    ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: '多列<br />（自定義）',
                    columns: [200, 200, 200, 200],
                    // vertical: true,
                    items: [
                        {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
                        {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
                        {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
                        {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
                        {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
                    ]
                }, {
                    xtype: 'checkboxgroup',
                    itemCls: 'x-check-group-alt',
                    fieldLabel: '自自定義佈局',
                    allowBlank: false,
                    anchor: '95%',
                    items: [{
                        columnWidth: '.25',
                        items: [
                            {xtype: 'label', text: 'Heading 1', cls: 'x-form-check-group-label', anchor: '-15'},
                            {boxLabel: 'Item 1', name: 'cb-cust-1'},
                            {boxLabel: 'Item 2', name: 'cb-cust-2'}
                        ]
                    }, {
                        columnWidth: '.5',
                        items: [
                            {xtype: 'label', text: 'Heading 2', cls: 'x-form-check-group-label', anchor: '-15'},
                            {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
                        ]
                    }, {
                        columnWidth: '.25',
                        items: [
                            {xtype: 'label', text: 'Heading 3', cls: 'x-form-check-group-label', anchor: '-15'},
                            {boxLabel: 'Item 4', name: 'cb-cust-4'},
                            {boxLabel: 'Item 5', name: 'cb-cust-5'}
                        ]
                    }]
                }]
            });

            form.render(document.body);

        });
    </script>
</head>
<body>
</body>
</html>