Ext4.2学习之复选框与单选按钮复杂控件

最新推荐文章于 2023-06-17 22:44:27 发布

lang20150928

最新推荐文章于 2023-06-17 22:44:27 发布

阅读量156

点赞数

分类专栏： extjs 文章标签： html js

本文链接：https://blog.csdn.net/m0_37607945/article/details/115024869

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

通过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>