Как изменить CSS Extjs4 для конкретной панели

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

С помощью метода добавления панели в я в том числе это ас- afterrender: функция() { var me = this; me.add (gantt); }

Таким образом, для изменения цвета, я изменить CSS как-

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

Но его меняющегося цвета всех панелей в рамках моего проекта. Итак, как переопределить этот css, чтобы он менял цвет только gantt.

Answer 1

Вы можете использовать идентификатор компонента (панель) сам по себе или любому верхнему уровню идентификатора компонента, в котором панель оказывается как

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

Answer 2

Вы должны быть в состоянии получить gantt пункт и изменить cssclass из него, используя что-то вроде:

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

Я не проверял это, но вы можете получить идею. Если вы хотите сбросить класс css для элемента, используйте .setCls(), чтобы настроить его с нуля.

Answer 3

Используйте 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; 
}