如何更改特定面板的Extjs4 CSS
如何更改特定面板的Extjs4 CSS
提问于 2013-12-05 18:40:40
我在extjs4工作。我对ganttChart有看法。我想改变分割线的颜色，它在树柱和甘特图之间。我正在创建甘特图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',
}],我在下面的表单panel=中包含了这张甘特图
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})通过使用面板的add方法，我将其包含为- afterrender : function(){ var me = this；me.add(甘特图)；}
所以为了改变颜色，我把css改成-
.x-panel-default{
border-color: red;
padding: 0;
}但它改变了我的项目中所有面板的颜色。那么如何覆盖这个css，使它只改变甘特图的颜色。
回答 3
Stack Overflow用户
发布于 2013-12-05 19:04:25
为此，请使用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;
}Stack Overflow用户
发布于 2013-12-05 18:50:59
您可以使用组件(面板)本身的id或呈现面板的组件的任何顶级id，如下所示
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}Stack Overflow用户
发布于 2013-12-05 18:53:49
您应该能够获得您的gantt项目，并使用如下命令更改其css class：
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');我还没有测试过这个，但是你可以理解这个想法。如果想要重置项目的css类，可以使用.setCls()从头开始设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20397757
复制相关文章
相似问题
腾讯云开发者
