ExtJS4 TreePanel中圖標的問題

我們使用TreePanel中我們application.The代碼：ExtJS4 TreePanel中圖標的問題

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

但是我們在這裏面臨的兩個問題。

1.我們爲父節點指定了iconCls，當樹摺疊時顯示效果很好。如果我們展開樹，它會被文件夾圖標替換。有關參考請查看附加圖像。
2.如果我們選擇父節點，那麼必須選擇特定父節點下的子節點。

enter image description here

如果任何人有idea.Please幫助me.We試圖對這些問題很多。

來源

2011-07-15 Unknown

轉到您的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-20 11:08:18 Armance

請注意，這會改變您應用中的所有樹木。 – dbrin

可以指定你想要的圖標變化通過列出樹的「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-16 05:54:03 user1454926

改變圖標的樹，然後給它的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-05 11:04:44

ExtJS4 TreePanel中圖標的問題

回答

相關問題