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

似乎您需要多个按钮，其中一个按钮处于选中状态。为此，必须为所有按钮提供相同的配置

然后，切换按钮显示为比未切换按钮更深的蓝色。您可能必须将函数从处理程序配置更改为toggleHandler。

示例：

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
            }]
        });
    }
});

---

您还可以为代码使用css类。你可以不使用，你可以

你可以提供小提琴的例子吗？谢谢

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
        }]
    });
}
});