extjs - ExtjsカスタムTreeGrid行CSS

Question

ツリーグリッドの子レベルに代替行cssを適用する方法はありますか？

現在、treePanel viewConfigのstripeRows構成はすべてを灰色と白にするだけですが、子行と親行を区別することは困難です。

理想的には、親オブジェクトをある方法で色を変え、子行を別の方法で色を変えたいと思います。

「getRowClass」メソッドを使用して行クラスを手動で更新する関数を作成することを考えていました。もっときれいな方法があるのだろうかと思っていました。

Answer 1

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;
}
...

ここにある解決策

Answer 2

モデルで iconCls プロパティを使用して、行をアイコンで区別しました。これには、親行と子行を分離するだけでなく、子行自体も分離するという追加の利点があります。

モデル マッピング トリックを使用して、次のような異なる行型の値を取得しました。

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

次に、さまざまな型名をサポートする css クラスも追加しました。

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

お役に立てれば。