如何更改特定面板的 Extjs4 CSS

Question

我在 extjs4 中工作。我有 ganttChart 视图。我想更改 treecolumn 和 gantt 之间的分隔线的颜色。我正在创建甘特图 =

 var gantt = Ext.create("Gnt.panel.Gantt", {           
           itemId :'project-list-gantt-chart',

            cls : 'projectlistganttchart',
            enableTaskDragDrop: false,
            columnLines :true,
            lockedGridConfig :{
                split: false 
            },
            viewPreset : 'customPreset',
            columns : [{
                xtype : 'treecolumn',
                sortable: true,
                dataIndex: 'Name',
            }],

我在下面的表单面板中包含了这个甘特图=

Ext.define('GanttChart' ,{
    extend: 'Ext.form.Panel',
   border: false,
})

通过使用面板的 add 方法，我将它包含为 - afterrender ： function(){ var me = this; 我.添加（甘特图）；}

所以为了改变颜色，我将 css 更改为-

.x-panel-default{
    border-color: red;
    padding: 0;
}

但是我的项目中所有面板的颜色都会发生变化。那么如何覆盖这个 css 以便它只改变甘特图的颜色。

Answer 1

ui为此使用cfg 参数：

// add this config line to your panel that host the gantt
ui: 'gantt'

并添加这个css

.x-panel-gantt{
    border-color: red;
    padding: 0;
}

请注意，ui正是针对此类事情。

你可能想参考这个fiddle。请注意，它可能会遗漏一些 css 类，但我想它应该向您展示诀窍。请注意，您需要以正确的方式设置边框，因为根据主题，边框可能为 0px。示例中也是如此。另外这里是演示代码：

Javascript

Ext.create('Ext.panel.Panel', {
    title: 'test',
    height: 200,

    width: 200,
    ui: 'custom',
    renderTo: Ext.getBody()
})

CSS（刚刚从开发人员工具中复制）

.x-panel-body-custom {
    color: black;
    font-size: 13px;
    font-size: normal;
}

.x-panel-custom{
    border: 1px solid red;
    padding: 0;
}

.x-panel-body-custom {
    background: white;
    border-color: #157fcc;
    color: black;
    font-size: 13px;
    font-size: normal;
    border-width: 1px;
    border-style: solid;
}
.x-panel-header-custom {
    background-image: none;
    background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
    padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
   padding: 9px 9px 10px 9px;
}