CODEWITHSUNDEEP
extjs
CodZilla
CodZilla

Reputation: 151

ExtJS button style

I have to change style of buttons in my app. Each button can its own style. So I have to do it through javascript dynamically. Button has setStyle() in doc. But it doesn't work like that. How to achieve this?

Here is an example!

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    style : {
        'color' : 'red',
        'font-size' : '15px',
        'font-weight' : 'bold'
    },
    handler: function() {
        this.setStyle({'color':'blue'});
        alert('Style applied!');
    }
});

Upvotes: 1

Views: 12966

Answers (5)

Harshal
Harshal

Reputation: 946

Use 'cls' config of button. You can have different classes for different states of button like disabledCls when button is disabled, iconCls to show icon. Also you can add or remove cls runtime using addCls and removeCls methods.

Upvotes: 0

Johan Van de Merwe
Johan Van de Merwe

Reputation: 312

If you work with Sencha CMD you could easily add SASS mixins for the button. In the example below I use the mixins 'default-toolbar' and 'default-small' as an example. But you could make mixins for every kind of button and call them 'redalert', 'greenpeace', 'blueplanet' or whatever your want.

A SASS mixin has the great advantage that it works with the dynamic values that you don't modify. So if you change the color of the button to red, the click or hover is automatically modified to a light red for example.

See also: Link to Sencha Docs for button UI mixin

Ext.application({
    name: 'Fiddle',

    launch: function () {
       Ext.create('Ext.Button', {
           text: 'Click me',
           renderTo: Ext.getBody(),
           scope: this,
           ui: 'default-toolbar',
           handler: function (b) {
               console.log(b.ui);
               b.setUI(b.ui !== 'default-small' ? 'default-small' : 'default-toolbar');
           }
       });
   }

})

Upvotes: 1

Nikos Js
Nikos Js

Reputation: 199

Inspect and see where Sencha sets the color, for example in the button case it is set on the .x-btn-inner element.

this.getEl().select('.x-btn-inner').setStyle({'color':'blue'});

See fiddle https://fiddle.sencha.com/#view/editor&fiddle/1obm

edit : select is not documented. Use down instead.

this.getEl().down('.x-btn-inner').setStyle({'color':'blue'});

Upvotes: 1

Jeba Prince
Jeba Prince

Reputation: 1671

As bullettain suggested using classes will be the maintainable way.

How ever for your specific requirement use the below code.

Ext button are nothing but a <a> tag, and underneath text is a <span> with class ".x-btn-inner"

Ext.application({
name: 'Fiddle',

launch: function () {
    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),

        handler: function () {
            // Javascript style
            this.el.query('span .x-btn-inner')[0].style.color = 'red';
        }
    });
}


  });

https://fiddle.sencha.com/#view/editor&fiddle/1oar

Upvotes: 1

bullettrain
bullettrain

Reputation: 966

Your code is doing just what its supposed to do, however it is changing font color on the anchor tag which is just the wrapper for the span that is holding the text which you are trying to change color of.

My suggestion is to use cls property instead of style. Than toggle its styles..

here's a fiddle https://fiddle.sencha.com/#view/editor&fiddle/1o92

hope it helps

Upvotes: 2

Related Questions