Segmented Button 的应用

最新推荐文章于 2025-05-18 22:54:53 发布

转载最新推荐文章于 2025-05-18 22:54:53 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/quhongxin/p/6747711.html

本文介绍如何在ExtJS中配置SegmentedButton组件以实现多选功能，并提供了具体的JS代码示例及对应的CSS样式。通过设置allowMultiple属性为true启用多选，同时还展示了按钮的默认样式和选中状态样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Segmented Button 常被用作工具条、导航栏，默认为单选切换，如果想实现多选，只需设置allowMultiple属性为true。

JS:

{
    xtype: 'container',
    items: [{
            xtype: 'segmentedbutton',
            allowMultiple: true,
            layout: 'hbox',
            cls: 'segBtns',
            defaults: {
                ui: 'plain',
                cls: 'btn'
            },
            items: [{
                    text: '爱情',
                    flex: 1,
                    pressed: true
                },
                {
                    text: '事业',
                    flex: 1
                },
                {
                    text: '梦想',
                    flex: 1
                },
            ],
            listeners: {
                element: 'element',
                toggle: {
                    fn: function(container, button, pressed) {
                        alert();
                    }
                }
            }
        }

    ],
}

CSS:

.segBtns .btn{
    color: white;
    border-radius: 0px;
    background: #0E4A75;
}
.segBtns .btn.x-button-pressed{
    background: yellow;
    color: red;
}

2.在app.json，bootstrap.json中引入自定义css。

转载于:https://www.cnblogs.com/quhongxin/p/6747711.html