如何更改特定面板的Extjs4 CSS

我在extjs4中工作。我对甘特哈特有看法。我想更改树柱和甘特图之间的分割线的颜色。我正在创建甘特图作为=

 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=这个； me.add（甘特）； }

因此，对于更改颜色，我将css更改为-

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

---

但它改变了我项目中所有面板的颜色。因此，如何覆盖此css，使其仅更改甘特图的颜色。

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

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

---

可以使用组件（面板）本身的id，也可以使用渲染面板的组件的任何顶级id，如

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

---

您应该能够获取您的

gantt

项，并使用以下方法更改它的

css

类

：

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

我还没有测试过这个，但你可以得到这个想法。

---

如果要重置项目的css类，请使用

.setCls（）

从头开始设置。

您应该能够获取您的

甘特图

项目，并使用以下方法更改它的

css

类

：

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

我还没有测试过这个，但你可以得到这个想法。

---

如果要重置项目的css类，请使用

.setCls（）

从头开始设置。

使用

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

正是为这些事情而设计的

你可能想参考一下这个。请注意，它可能会错过一些css类，但我想它应该向您展示技巧。请注意，您需要以正确的方式设置边框，因为基于主题，边框可能是0px。在本例中也实现了这一点。此外，以下是演示代码：

Javascript

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

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

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

---

使用

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

正是为这些事情而设计的

你可能想参考一下这个。请注意，它可能会错过一些css类，但我想它应该向您展示技巧。请注意，您需要以正确的方式设置边框，因为基于主题，边框可能是0px。在本例中也实现了这一点。此外，以下是演示代码：

Javascript

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

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

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

---

thanx for reply sir..实际上甘特图的id是动态创建的。因此，如何在这种情况下定义css thanx for reply sir..实际上甘特图的id是动态创建的。因此，如何在这种情况下定义css thanx for help..但它不起作用。我添加了配置行和css。它不会改变线条的颜色。@user1722857是的，我忘了这会影响所有以前命名为

的css类。x-panel-default

现在将命名为

。x-panel-gantt

。不管怎么说，这就是我要走的路，因为你得到了一个可维护的风格，你在应用风格的每一行代码中都会失去它。但总的来说，一切都取决于你，仅仅改变线条颜色在你看来可能是一个很小的改变，因此创建自定义用户界面可能需要很多帮助。我添加了配置行和css。它不会改变线条的颜色。@user1722857是的，我忘了这会影响所有以前命名为

的css类。x-panel-default

现在将命名为

。x-panel-gantt

。不管怎么说，这就是我要走的路，因为你得到了一个可维护的风格，你在应用风格的每一行代码中都会失去它。但总的来说，一切都取决于你，仅仅改变线条颜色在你眼中可能是如此微小的改变，以至于创建自定义ui的代价可能太大了；css添加为.project{border color:red；padding:0；}，但它不起作用；css添加为.project{border color:red；padding:0；}，但它不起作用。