这是重新设置ExtJS应用程序的正确方法吗？

Question

我在ExtJS中有一个Web应用程序，并使用灰色主题。

现在我想适应它到特定的布局设计，例如我想更改颜色并在“应用程序”一词后面添加一个图形。我一直在阅读有关how to edit ExtJS Themes的信息，但不是我要更改的核心组件，而是屏幕上的特定区域，例如这个页面标题。

所以我正在讨论这个的方式是查看Firebug中的HTML输出：

然后在一个额外的CSS文件中，设置我认为会影响我的样式更改的标签，例如。

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

大部分都有效，但是这似乎非常命中注意，例如在某些地方，我可以设计我需要的区域的唯一方法是使用看似任意的元素id ，例如。

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

这似乎非常脆弱，好像这些身份证号码将来可能会发生变化等等。

这是设计ExtJS应用程序样式的正确方法还是有更合适的方法？

Answer 1

这不是正确的方法，因为不能保证id不相同。大多数ext组件都有style属性，可用于自定义css，或者您可以指定用于样式的css类。您可以在组件定义中执行此操作。

现在，如果你想为每个组件覆盖一个ExtJS css类，那么就像你的第一个例子一样。

Answer 2

大多数对象都有 cls 属性，您可以设置该属性来定义您在css文件中定义的自定义类。以下是使用它将径向渐变应用于主视口的一个示例...

jsFiddle Example

css CODE

.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 CODE

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' }) ]
    } ]
});