CODEWITHSUNDEEP
extjs
anka
anka

Reputation: 41

How to show ExtJS button in different color when it is clicked

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

Upvotes: 0

Views: 1080

Answers (2)

Sangnc
Sangnc

Reputation: 26

Example:

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

You also use css class for the code. Instead of using setStyle, you can you addClass

Upvotes: 0

Alexander
Alexander

Reputation: 20224

It seems as if you want multiple buttons of which one is selected. For this, you have to provide the same toggleGroup config to all buttons.

The toggled button is then displayed in a darker blue than the untoggled buttons. You may have to change the function from the handler config to toggleHandler.

Upvotes: 1

Related Questions