ノードにiconCls:'xxx'を設定すると、そのノードのアイコンに対応するスタイルが.x-tree-node img.xxxになる。あとはbackground-image:url()でアイコンを指定する。あとcls:'yyy'を設定すると独自のスタイルを適用できる。ちなみにleafとfolderはext-all.cssで定義済みなので使用しないこと。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample - Tree</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var json =
[
{'text':'A', 'id':1, 'leaf':false, 'children':[
{'text':'AA', 'id':11, 'leaf':true}
], 'iconCls':'xxx', 'cls':'yyy'}
];
var tree = new Ext.tree.TreePanel('tree', {
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
});
var root = new Ext.tree.AsyncTreeNode({
children: json
});
tree.setRootNode(root);
tree.render();
root.expand();
});
//--></script>
<style type="text/css">
.x-tree-node img.xxx {
background-image:url(images/icon.gif);
}
.yyy {
background-color:#c3f9da;
}
#tree {
height:200px;
width:100px;
border:1px solid #c3daf9;
overflow:auto;
}
</style>
</head>
<body>
<div id="tree" />
</body>
</html>
0 件のコメント:
コメントを投稿