Как динамически изменить цвет фона панели ExtJS

Question

В настоящее время у меня есть две панели в другой большой панели. Левая панель предназначена для навигации, а правая - для содержимого. Я пытаюсь изменить цвет фона панели содержимого, чтобы я создал событие, которое активируется на узле расширения, и я застрял здесь.

Мой правый идентификатор панели - #panneau-affichage, и я пытаюсь изменить атрибут background-color класса x-panel-body, который находится внутри. Использование:

Ext.get('panneau-affichage').setBodyStyle('backgroundColor : #dddddd');

Firebug заявляет, что такой функции нет, и с помощью:

Ext.get('panneau-affichage').applyStyle('backgroundColor: #dddddd);

Это делает работу для div, но переопределяется x-panel-body.

Answer 1

Решение для этого:

Ext.getCmp('panel-id').body.setStyle('background','lightblue');

Answer 2

Почему бы вам просто не установить его с помощью CSS? Используйте Firebug, чтобы перейти к элементу div панели body. Напишите свое собственное переопределение, используя идентификатор вашей панели. Таким образом, он будет работать без Javascript, и всегда, и даже до того, как вы запустите свои скрипты.

Использование имен классов CSS
Если вы не смотрите на постоянные изменения и настройки, все равно было бы намного лучше определить класс CSS и добавить / удалить класс для самой панели, а также задать стиль тела панели с помощью CSS. Это было бы централизовано и намного лучше настраиваемо. И это будет держать стиль подальше от вашего кода, который вы всегда должны достичь. Отдельный код от визуальных элементов.

Answer 3

Вы используете Ext.get (). Это возвращает объект Ext.Element, у которого нет функции setBodyStyle (). Ext.Element не является узлом HTML, но вы можете видеть его как оболочку для него.

Правильная функция для вас будет setStyle (свойство String / Object, [String value]). Если я не совсем ошибаюсь, для вашей потребности это должно работать:

Ext.get('panneau-affichage').setStyle('backgroundColor','#dddddd');