Как установить стили с помощью ExtJS - PullRequest
Новая
       0

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

24 голосов
/ 20 марта 2011

Я хотел изменить стили, такие как цвет, размер шрифта, фон и т. Д. Элемента или 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

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

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

Ответы [ 3 ]

35 голосов
/ 20 марта 2011

Изменить стиль элементов 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 виджета напрямую, используя методы выше.

7 голосов
/ 09 декабря 2011

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

это не applyStyle, а 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'
});
4 голосов
/ 22 апреля 2014

В виджете возможно следующее (но только перед его визуализацией, так как во время рендеринга применяется свойство конфигурации 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';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...