4

アプリケーションでツリーパネルを使用しています。コードは次のとおりです。

var exStore = Ext.create('Ext.data.TreeStore',{ 
    root : { 
        children : [{ 
            text : 'Parent 1',
            id : 'parent1',
            checked : false,
            iconCls : 'ico1',
            children : [{
                text : 'Child 1',
                id : 'child1',
                checked : false,
                leaf : true
            },{
                text : 'Child 2',
                id : 'child2',
                checked : false,
                leaf : true
            }]
        },{
            text : 'Parent 2', 
            id : 'parent2',
            checked : false,
            iconCls : 'ico2',
            children :[{
                text : 'Child 3',
                id : 'child3',
                checked : false,
                leaf : true
            },{
                text : 'Child 4',
                id : 'child4',
                checked : false,
                leaf : true
            }]
        }] 
    }
});

var treepanel = Ext.create('Ext.tree.Panel',{
    id : 'tree',
    width : 300,
    height : 300,
    store : exStore,
    rootVisible : false
});

しかし、ここで 2 つの問題に直面しています。

1.親ノードにiconClsを指定しました。ツリーを折りたたむと正常に表示されます。ツリーを展開するとフォルダアイコンに置き換わります。参考までに添付画像をご覧ください。
2.親ノードを選択すると、特定の親ノードの下にある子ノードが選択される必要があります。

ここに画像の説明を入力
ここに画像の説明を入力

アイデアがあれば、助けてください。私たちはこれらの問題に多くのことを試みています。

4

3 に答える 3

4

あなたのcssに行き、次のようなものを試してください：

.x-tree-node-collapsed .x-tree-node-icon
{
    background-image: url('../images/tree/ico1.png') !important;
    background-repeat: no-repeat;
}

   .x-tree-node-expanded .x-tree-node-icon
{
    background-image: url('../images/tree/ico2.png') !important;
    background-repeat: no-repeat;
}
    .x-tree-node-leaf .x-tree-node-icon{
    background-image:url(/images/menu/folder.gif);

}
于 2011-07-20T11:08:18.930 に答える
3

ツリーの「cls」プロパティをリストすることで、アイコンの変更を適用するツリーを指定できます。例えば：

{    
    xtype: 'treepanel',    
    cls: 'my-tree-panel',    
    store: 'MyStore',
    ...
}

これにより、ツリー パネルを含む DIV に CSS クラス 'my-tree-panel' が適用されます。次に、css ファイルでセレクターを次のように定義します。

.my-tree-panel .x-tree-icon-leaf {    
    background-image: url("images/newicon.png") !important;
}

アイコンの変更は、その特定のツリー パネルにのみ適用されます。したがって、アプリケーションにさまざまなツリー パネルを配置でき、それぞれのアイコンをカスタマイズできます。

于 2012-06-16T05:54:03.877 に答える
0

ツリーのアイコンを変更し、そのIDを次のように指定します

 #tree x-tree-node-expanded  .x-tree-node-icon
{
    background-image: url("bookopen.png") !important;
    background-repeat: no-repeat;
}
#tree .x-tree-node-collapsed   .x-tree-node-icon
{
    background-image: url("bookclose.png") !important;
    background-repeat: no-repeat;
}

特定のアイコンのアイコンが必要な場合は、そのノード ID を指定すると、同じように機能します。

于 2013-07-05T11:04:44.353 に答える