标签：buttongroup xtype text fa UI ButtonGroup 按钮 iconCls ExtJS

更新记录
转载请注明出处: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'}
                    ]
                }
            ]
        }
    ]
}

标签：buttongroup,xtype,text,fa,UI,ButtonGroup,按钮,iconCls,ExtJS
来源： https://www.cnblogs.com/cqpanda/p/16587354.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。