Как установить стили с помощью ExtJS

Я хотел изменить стили, такие как цвет, размер шрифта, фон и т.д. элемента или виджет extJS, используя следующий код, но не работает:

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

И для виджета extJ я попытался использовать Ext.getCmp.

Кто-нибудь знает, как изменить стили элемента html и виджета extJS с помощью extJS, а не CSS?

Ответы

Ответ 1

Изменение стиля элементов HTML DOM довольно просто:

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 не будет работать напрямую, поскольку он возвращает простой массив найденных узлов DOM, поэтому вам придется перебирать результат для применения стилей. Что вы сделали точно?

Виджеты стиля не так-то легко. Большинство виджетов предоставляют некоторые атрибуты стиля, такие как cls, ctCls, bodyCls или style, но они применяются при рендеринге компонента. Чтобы изменить стиль виджетов после рендеринга, вы должны напрямую изменить элементы DOM виджета, используя приведенные выше методы.

Ответ 2

В вашем вопросе есть опечатка в ошибке:

он не применяетсяStyle, но applyStyles.

applyStyles - это метод Ext.Element, вы можете использовать его следующим образом:

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

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

Ответ 3

В виджетах (но только до его рендеринга) возможно следующее: поскольку свойство style применяется во время рендеринга):

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

Это полезно, если вы говорите, что используете какое-то определенное значение для какой-либо другой настройки конфигурации.

Как уже указывалось, у вас есть доступ к методу setStyle() инкапсулированного Ext.Element:

component.getEl().setStyle(config);

Наконец, вы можете сразу перейти к мясу и напрямую обратиться к инкапсулированному DOM element:

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