javascript - extjsツリーのアイコンを取り除く方法

Question

extjsツリーのアイコンを削除したいと思います。代わりに、子を持つすべてのノードを太字で設定したいと思います。

Answer 1

ExtJSはスタイル設定にCSSに依存しているため、アイコンを削除する最も簡単な方法は、Extによって提供されるものをオーバーライドするCSSルールを作成することです。

これは仕事をします：

.x-tree-icon { display: none !important; }

configオプションを使用してクラスを追加するextraClsか、必要に応じてコンポーネントIDを使用してルールを修飾します。

太字のテキストについては、CSSだけを使用する方法はないようです。したがって、ノードを動的に追加する場合は十分ではありませんが、ツリービューのafterRenderイベントを聞くことができます。

Answer 2

列定義：

columns: [{
    xtype: 'treecolumn',
    text: 'Task',
    iconCls: '', // This property to get rid of tree icon
    width: 200,
    sortable: true,
    dataIndex: 'someStringIdentifier',
    locked: true
}

Answer 3

2つの利点をもたらすExtJS6.5を使用した私のソリューションの下に：

• 特定のタイプのノードのみに焦点を当てる
• トリガーとテキストの間のスペースを避けるため

モデルiconClsで、カスタムcssクラスを返す計算を定義します。

{
    name: 'iconCls',
    calculate: function (data) {
        return 'uw-shrink-icon';
    }
}

次に、sassファイルで、ネイティブのx-tree-icon-customcssクラスを利用して幅を0に設定します。

.x-tree-icon-custom.uw-shrink-icon {
    background-image: none;
    width:0px;
}