/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
title: 'My Task List',
height: 450,
width: 600,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
dataUrl: 'check-nodes.json',
buttons: [{
text: 'Get Completed Tasks',
handler: function(){
var msg = '', selNodes = tree.getChecked(); // getNode select return array
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show({
title: 'Completed Tasks',
msg: msg.length > 0 ? msg : 'None',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
});
// tree.on 函数传入参数 第一个:事件名, 第二个:函数,第三个:Object
// 全局变量
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);
tree.getRootNode().expand(true);
});
html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/ColumnNodeUI.css" />
<link rel="stylesheet" type="text/css" href="column-tree.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../code-display.js"></script>
<script type="text/javascript" src="../ux/ColumnNodeUI.js"></script>
<script type="text/javascript" src="column-tree.js"></script>
<!-- EXAMPLES -->
<script type="text/javascript" src="../shared/examples.js"></script>
</head>
<body>
<h1>ColumnTree Example</h1>
<p>Demonstrates extending the native <tt>Ext.tree.TreePanel</tt> and <tt>Ext.tree.TreeNodeUI</tt>
to display basic columns via the custom <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnTree</a>
and <a href="../ux/ColumnNodeUI.js">Ext.ux.tree.ColumnNodeUI</a> classes.</p>
<p>The js is not minified so it is readable. See <a href="column-tree.js">column-tree.js</a>.</p>
</body>
</html>
json:
[{
id:1001,
text: 'To Do',
checked: false,
cls: 'folder',
children: [{
text: 'Go jogging',
id:100101,
checked: false,
children:[{id:10010101,text:'aaa',leaf:true,checked:false},{id:10010102,text:'bbb',leaf:true,checked:false}]
},{
text: 'Take a nap',
id:100102,
leaf: true,
checked: false
},{
text: 'Climb Everest',
id:100103,
leaf: true,
checked: false
}]
},{
text: 'Grocery List',
id:1002,
checked: false,
cls: 'folder',
children: [{
text: 'Bananas',
id:100201,
leaf: true,
checked: false
},{
text: 'Milk',
id:100202,
leaf: true,
checked: false
},{
text: 'Cereal',
id:100203,
leaf: true,
checked: false
},{
text: 'Energy foods',
id:100204,
checked: false,
cls: 'folder',
children: [{
text: 'Coffee',
id:10020401,
leaf: true,
checked: false
},{
text: 'Red Bull',
id:10020402,
leaf: true,
checked: false
}]
}]
},{
text: 'Remodel Project',
id:1003,
checked: false,
cls: 'folder',
children: [{
text: 'Finish the budget',
id:100301,
leaf: true,
checked: false
},{
text: 'Call contractors',
id:100302,
leaf: true,
checked: false
},{
text: 'Choose design',
id:100303,
leaf: true,
checked: false
}]
}]
三个文件组装成了一棵树