ExtJS - UI组件 - ButtonGroup

更新记录
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587354.html
2022年8月16日 发布。
2022年8月13日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

说明#

Ext.container.ButtonGroup（按钮组），按钮组的xtype为'buttongroup'

实例：创建按钮组#

{
    xtype:'buttongroup',
    title:'文件操作',   //按钮组的标题
    renderTo: Ext.getBody(),
    items:[
        { text: '新建', iconCls: 'fa fa-save'},
        { text: '编辑', iconCls: 'fa fa-edit'},
        { text: '移除', iconCls: 'fa fa-trash-alt'}
    ]
}

实例：设置按钮跨越多行#

使用columns布局，然后使用rowspan配置项即可

代码：

{
    xtype:'buttongroup',
    title:'文件操作',   //按钮组的标题
    columns:2,   //设置为2列
    defaults: {
        border: '1px solid #ddd',
    },
    items:[
        { 
            text: '新建', 
            iconCls: 'fa fa-plus-square',
            scale: 'large',
            rowspan: 2,   //跨越2行
            iconAlign: 'top'
        },
        {
            text: '编辑',
            iconCls: 'fa fa-edit'
        },
        {
            text: '移除',
            iconCls: 'fa fa-trash-alt'
        }
    ]
}

实例：在toolbar中放置按钮组#

代码：

{
    title: 'Panel & Toolbar',
    dockedItems: [
        {   
            xtype : 'toolbar',
            dock: 'bottom', //top|bottom|left|right
            items: [
                { 
                    xtype:'buttongroup',
                    title:'文件操作',
                    items:[
                        {text: 'New', iconCls: 'fa fa-plus'},
                        {text: 'Edit', iconCls: 'fa fa-edit'},
                        {text: 'Remove', iconCls: 'fa fa-trash-alt'}
                    ]
                },
                {
                    xtype: 'buttongroup',
                    title: '打印/导出',
                    items:[
                        {text: '导出', iconCls: 'fa fa-file-export'},
                        {text: '打印', iconCls: 'fa fa-print'},
                        {text: '帮助', iconCls: 'fa fa-hands-helping'}
                    ]
                }
            ]
        }
    ]
}