EXTJS 5 Tree grid custom row css
我有一个树状网格,我想更改父行和子行的css(以我的情况为背景色)。
我做了一些css类并使用了viewConfig.getRowClass方法,但不适用于悬停和选择。
这是我问题的小提琴:https://fiddle.sencha.com/#fiddle/jl1
这是我的树形网格:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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; } |
您知道为什么选择和悬浮css无法正常工作吗?
预先感谢=)!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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; } |