ext js изменить цвет панели на градиент

Question

Я пытаюсь изменить цвета всех элементов в моем первом проекте ExtJS6. Предпочтительно, я хотел бы создать некоторые градиенты для таких вещей, как фоны панели и т. П.

Может кто-нибудь, пожалуйста, покажите мне, как это сделать?

Я смотрю это сообщение с 2009 года, но он просто показывает отдельные цвета, он может быть устаревшим, и я не знаю, где добавить строки в css в моем проекте?

Two ways: 

First(Directly change in panel): 
new Ext.Panel({ 
width:200, 
height:200, 
bodyStyle:{"background-color":"red"}, 
renderTo: document.body 
}); 

Second(Add CSS class and use it in Panel's 'bodyCssClass' property): 
.x-panel-body{ 
background-color: blue} 

спасибо!

Answer 1

bodyStyle позволяет вам устанавливать свойства CSS, такие как background-image. Это применимо к одному виджету.

new Ext.Panel({ 
    width:200, 
    height:200, 
    bodyStyle:{'background-image': 'linear-gradient(red, orange);'}, 
    renderTo: document.body 
}); 

Если вы хотите применить ко всем панелям, вы добавляете CSS после CSS Ext-

.x-panel-body{ 
    background-image: linear-gradient(red, orange); 
} 

Если вы хотите, чтобы применить к набору панелей, добавьте cls конфигурации и согласование правило CSS

.my-special-bg { 
    background-image: linear-gradient(red, orange); 
} 

new Ext.Panel({ 
    width:200, 
    height:200, 
    cls: 'my-special-bg', 
    renderTo: document.body 
}); 

Answer 2

Я считаю, что если вы хотите

изменение цвета всех элементов в моем первом проекте ExtJS6

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

Проверьте это ExtJS theming guide.