How to set styles using ExtJS

Question

I wanted to change the styles like color, font size, background, etc of an element or extJS widget using following code but none works:

Ext.get('mydivid').setStyle({.......});     // does not work
Ext.get('mydivid').applyStyle({.......});   // does not work
Ext.select('mydivid').applyStyle({.......});   // does not work
Ext.query('.myclass').applyStyle({.......});   // does not work

And for extJs widget I tried using Ext.getCmp.

Does anyone know how to change the styles of an html element and extJS widget using extJS and not CSS?

score 37 · Accepted Answer · answered Mar 20 '11 at 14:17

Changing the style of HTML DOM elements is quite easy:

HTML

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="el1">Element 1</div>
        <div class="el">Element [1]</div>
        <div class="el">Element [2]</div>
    </body>
</html>

Javascript

Ext.onReady(function() {
    Ext.get('el1').setStyle('color', 'red');
    Ext.select('.el').setStyle('color', 'green');
});

Ext.query will not work directly as it returns a simple array of found DOM nodes, so you'd have to loop over the result to apply styles. What did you do exactly?

Styling widgets is not that easy unfortunately. Most widgets provide some styling attributes such as cls, ctCls, bodyCls or style but they are applied when rendering the component. To change the style of widgets after rendering you must change the widget's DOM elements directly using the methods above.

+1 Thanks for your answer. Can't we use `setStyle` or `applyStyles` for widgets ? — Sarfraz, Mar 20 '11 at 14:37
You can`t set the style for a widget directly because a widget itself doesn't have a style. The widget is made up of DOM nodes that are assigned to CSS classes or have style attributes set to produce the overall appearance of a widget. To manipulate styles you have to access the DOM nodes forming the widget and apply the styles there. The better approach is always using CSS classes - messing with `setStyle()` on the DOM nodes is not really a thing wou should do. — Stefan Gehrig, Mar 20 '11 at 16:05

score 7 · Answer 2 · answered Dec 09 '11 at 12:28

There is typo error in your question:

it is not applyStyle but applyStyles.

applyStyles is method of Ext.Element, you can use it as follows:

var win = new Ext.Window({
      width: 200, 
      height: 200
});
win.show();

win.body.applyStyles({ 
  'background-color':'red',
  'border': '1px solid blue'
});

jenson-button-event · Answer 3 · 2014-04-22T17:32:32.023

The following is possible on the widget (but only before it is rendered, since the style config property is applied during render):

Ext.define('Ext.Component', {
  style: {},
  initComponent: function(config) {
    this.callParent(config);
    this.style['background-color'] = 'red';
  }
});

This is useful if say you are acting on some specific value of some other config setting.

As pointed out once rendered you have access to the setStyle() method of the encapsulated Ext.Element:

component.getEl().setStyle(config);

Finally you can go straight to the meat, and access the encapsulated DOM element directly:

component.getEl().dom.style.backgroundColor = 'red';

How to set styles using ExtJS

3 Answers3