Extjs Custom TreeGrid Row CSS

Есть ли способ применить альтернативную строку css на дочернем уровне древовидной сетки?

В настоящее время конфигурация stripeRows в treePanel viewConfig просто делает все серым и белым, но трудно отличить дочерние строки от родительских строк.

В идеале я хотел бы, чтобы родительские объекты чередовали цвета в одну сторону, а дочерние строки - в другую.

Я думал о написании функции с использованием метода getRowClass для ручного обновления класса строки. Мне было интересно, есть ли более чистый способ.


extjs extjs4 extjs4.1
person Babyangel    schedule 10.07.2012    source источник
comment
Поверьте мне, решение этого, вероятно, намного сложнее, чем вы хотите иметь дело. Использование изображений в примере DmitryB — лучший выбор, если позволяют ваши требования.   -  person Reimius    schedule 13.07.2012
comment
Я могу предоставить решение для этого, если вам это действительно нужно.   -  person Reimius    schedule 13.07.2012
comment
Иконки не будут работать с моими текущими требованиями. Если у вас уже есть рабочий пример, я бы хотел его увидеть!   -  person Babyangel    schedule 13.07.2012
comment
Я раскопаю и выложу, может быть немного.   -  person Reimius    schedule 13.07.2012

Ответы (2)


arrow_upward
4
arrow_downward

getRowClass выглядит хорошо для выполнения изменения атрибутов строки. Вы можете получить глубину узла с помощью функции getDepth():

var grid = Ext.create ('Ext.tree.Panel', {
    xtype: 'tree-grid',
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            return 'node-depth-' + record.getDepth()
        }
    }
...

И используйте css:

.node-dept-1 .x-grid-cell { 
    background-color: white; 
}
.node-depth-2 .x-grid-cell { 
    background-color: #dddddd;
}
...

Решение найдено здесь

person GregW    schedule 14.05.2014

arrow_upward
0
arrow_downward

Я использовал свойство iconCls в модели, чтобы различать строки по значку. Это дает дополнительное преимущество не только разделения родительских и дочерних строк, но и самих дочерних строк.

Я использовал трюк с отображением модели, чтобы получить разные значения типа строки, например:

{name:'iconCls', mapping:'type.name'}

а затем также добавил класс css для поддержки имен разных типов:

.cables, .Cable {
    background-image: url(../images/silk/cables.jpg) !important;
}

надеюсь это поможет.

person dbrin    schedule 11.07.2012