2015-04-07 5 views
1

У меня есть сетка дерева, и я хотел бы изменить css (в моем случае цвет фона) родительских строк и дочерних строк. Я сделал некоторый класс css и использовал метод viewConfig.getRowClass, но он не работает для наведения и выбора.EXTJS 5 Сетка дерева сетки css

Вот скрипка моей проблемы: https://fiddle.sencha.com/#fiddle/jl1

Это мое дерево сетка:

var tree = Ext.create('Ext.tree.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'TreeGrid', 
    rootVisible: false, 
    width: 300, 
    height: 250, 
    store: store, 

    viewConfig: { 
     getRowClass: function(record, index) { 
      if (record.get('name').indexOf('Group') != -1) { 
       return 'row-parent'; 
      } 
      return 'row-child'; 
     } 
    }, 

    columns: [{ 
     xtype: 'treecolumn', 
     text: 'Name', 
     dataIndex: 'name', 
     width: 150 
    }, { 
     text: 'Description', 
     dataIndex: 'description',   
     width: 150 
    }] 
}); 

И это мой CSS:

.row-parent .x-grid-cell {  
    background-color: #c1ddf1 !important; 
} 
.row-parent .x-grid-row-over .x-grid-cell { 
    background-color: #3da5f5 !important; 
} 
.row-parent .x-grid-row-selected .x-grid-cell { 
    background-color: #ff0 !important; 
} 

.row-child .x-grid-cell { 
    background-color: #e2eff8 !important; 
} 
.row-child .x-grid-row-over .x-grid-cell { 
    background-color: #85c4f5 !important; 
} 
.row-child .x-grid-row-selected .x-grid-cell { 
    background-color: #ff0 !important; 
} 

Вы знаете, почему выбор и hover css не работает?

Заранее спасибо =)!

ответ

2
.row-parent .x-grid-cell { 
    background-color: #c1ddf1 !important; 
} 
.x-grid-item-over .row-parent .x-grid-cell { 
    background-color: #3da5f5 !important; 
} 
.x-grid-item-selected .row-parent .x-grid-cell { 
    background-color: #ff0 !important; 
} 

.row-child .x-grid-cell { 
    background-color: #e2eff8 !important; 
} 
.x-grid-item-over .row-child .x-grid-cell { 
    background-color: #85c4f5 !important; 
} 
.x-grid-item-selected .row-child .x-grid-cell { 
    background-color: #ff0 !important; 
} 
Смежные вопросы