如何在单击时显示不同颜色的ExtJS按钮

Question

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create({
            xtype: 'form',
            layout: {
                type: 'hbox',
                pack: 'center',
            },
            renderTo: Ext.getBody(),
            width: 800,
            items: [{
                xtype: 'button',
                margin: '10 10 10 10',
                text: 'today',
                ui:'default-toolbar',
                handler: function() {
                    Ext.getCmp("new").show();
                    Ext.getCmp("test").hide();
                }
            }, {
                xtype: 'button',
                margin: '10 0 10 10',
                ui:'default-toolbar',
                text: 'last 7days',
                handler: function() {
                    Ext.getCmp("test").show();
                    Ext.getCmp("new").hide();
                }
            },
            {
                xtype: 'panel',
                margin: '10 20 10 20',
                id: 'new',
                html: 'you have selcted today button',
                hidden: true
            },
            {
                xtype: 'panel',
                margin: '10 20 10 20',
                id: 'test',
                html: 'you have selcted last 7days button',
                hidden: true
            }]
        });
    }
});

Answer 1

好像你想要多个按钮，其中一个被选中。为此，您必须为所有按钮提供相同的toggleGroup配置。

然后，切换按钮显示为比未遮挡按钮更深的蓝色。您可能需要将功能从handler配置更改为toggleHandler。

Answer 2

示例：

Ext.application({
name: 'Fiddle',
launch: function () {
    Ext.create({
        xtype: 'form',
        layout: {
            type: 'hbox',
            pack: 'center',
        },
        renderTo: Ext.getBody(),
        width: 800,
        items: [{
            xtype: 'button',
            margin: '10 10 10 10',
            text: 'today',
            ui:'default-toolbar',
            handler: function(btn) {
                var otherBtn = btn.up('form').down('button[text=last 7days]');
                btn.setStyle('background-color', '#08a4ff');
                otherBtn.setStyle('background-color', '#f6f6f6');
                Ext.getCmp("new").show();
                Ext.getCmp("test").hide();
            }
        }, {
            xtype: 'button',
            margin: '10 0 10 10',
            ui:'default-toolbar',
            text: 'last 7days',
            handler: function(btn) {
                var otherBtn = btn.up('form').down('button[text=today]');
                btn.setStyle('background-color', '#08a4ff');
                otherBtn.setStyle('background-color', '#f6f6f6');
                Ext.getCmp("test").show();
                Ext.getCmp("new").hide();
            }
        },
        {
            xtype: 'panel',
            margin: '10 20 10 20',
            id: 'new',
            html: 'you have selcted today button',
            hidden: true
        },
        {
            xtype: 'panel',
            margin: '10 20 10 20',
            id: 'test',
            html: 'you have selcted last 7days button',
            hidden: true
        }]
    });
}Ext.application({
name: 'Fiddle',
launch: function () {
    Ext.create({
        xtype: 'form',
        layout: {
            type: 'hbox',
            pack: 'center',
        },
        renderTo: Ext.getBody(),
        width: 800,
        items: [{
            xtype: 'button',
            margin: '10 10 10 10',
            text: 'today',
            ui:'default-toolbar',
            handler: function(btn) {
                var otherBtn = btn.up('form').down('button[text=last 7days]');
                btn.setStyle('background-color', '#08a4ff');
                otherBtn.setStyle('background-color', '#f6f6f6');
                Ext.getCmp("new").show();
                Ext.getCmp("test").hide();
            }
        }, {
            xtype: 'button',
            margin: '10 0 10 10',
            ui:'default-toolbar',
            text: 'last 7days',
            handler: function(btn) {
                var otherBtn = btn.up('form').down('button[text=today]');
                btn.setStyle('background-color', '#08a4ff');
                otherBtn.setStyle('background-color', '#f6f6f6');
                Ext.getCmp("test").show();
                Ext.getCmp("new").hide();
            }
        },
        {
            xtype: 'panel',
            margin: '10 20 10 20',
            id: 'new',
            html: 'you have selcted today button',
            hidden: true
        },
        {
            xtype: 'panel',
            margin: '10 20 10 20',
            id: 'test',
            html: 'you have selcted last 7days button',
            hidden: true
        }]
    });
}
});

您还可以使用css类作为代码。您可以使用setStyle

，而不是使用addClass