Это правильный способ рестайлинга приложения ExtJS?

Question

У меня есть веб-приложение в ExtJS, и я использовал Grey Theme .

Теперь я хочу адаптировать кконкретный дизайн макета, например, я хочу изменить цвет и добавить изображение за словом «Приложение».Я читал информацию о , как редактировать темы ExtJS , но я хочу изменить не компоненты core , а определенные области на экране, напримерзаголовок страницы.

Таким образом, способ, которым я собираюсь об этом , заключается в просмотре HTML-вывода в Firebug:

, а затемв дополнительном CSS-файле стилизация тегов, которые, как мне кажется, повлияют на мое изменение стиля, например,

.x-panel-body-noheader {
    background-color: #307E7E;
 }

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

div#ext-comp-1003 {
    background-color: #307E7A;
}

Это кажется очень хрупким, так какесли эти идентификационные номера могут измениться в будущем и т. д.

Это правильный способ разработки стиля приложения ExtJS или есть более подходящий способ?

Answer 1

Это неправильный способ, так как идентификаторы не обязательно будут одинаковыми.Большинство компонентов ext имеют свойство style , которое можно использовать для настройки css или указать класс css для использования в стиле.Вы должны сделать это в определении вашего компонента.

Теперь, если вы хотите переопределить класс ExtJS css для каждого компонента, вы сделаете это, как в первом примере.

Answer 2

большинство объектов имеют свойство cls , которое вы можете установить для определения пользовательского класса, который вы определили в своем файле CSS. Вот один из примеров его использования для применения радиального градиента к основному окну просмотра ...

jsFiddle Пример

код CSS

.gradient {
background: #f1f1f1; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #ffffff 30%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(30%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

app.js КОД

Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    renderTo: document.body,
    cls: 'gradient',  // use the css class .gradient

    items: [
    {
        xtype: 'container',
        region: 'center',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [ Ext.create('Ext.Img',{ src : 'loginlogo.png' }) ]
    } ]
});