Question

我在extjs4工作。我有ganttChart的观点。我想改变树柱和甘特图之间的分割线颜色。我正在创造gantt as =

 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,
})

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

因此，为了改变颜色，我将css改为 -

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

但它改变了我项目中所有面板的颜色。那么如何覆盖这个css，以便它只会改变gantt的颜色。

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;
}

Answer 2

您可以使用组件（面板）本身的id或呈现面板的组件的任何顶级ID

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

Answer 3

您应该可以使用以下内容获取gantt项并更改其css class

var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');

我没有测试过这个，但你可以得到这个想法。如果要重置项目的css类，请使用.setCls()从头开始设置。

如何为特定面板更改Extjs4 CSS

3 个答案: