Extjs Ext.TreePanel

TreePanel 简单实例。

 <link  rel="stylesheet"  href="Js/ext-4.2/resources/css/ext-all-neptune.css"/><script src="Js/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script><script src="Js/ext-4.2/ext-all-dev.js" type="text/javascript"></script> <script type="text/javascript">var tree;$(document).ready(function() {//Ext.create('Ext.tree.Panel', {  });
tree = new Ext.tree.TreePanel({renderTo: 'tree1',title: 'Simple Tree',multiSelect: true,width: 200,height: 450,viewConfig: {onCheckboxChange: function(e, t) {var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;if (item) {record = this.getRecord(item);var check = !record.get('checked');//getSelectedNodes()
                            record.set('checked', check);if (check) {record.bubble(function(parentNode) {parentNode.set('checked', true);});record.cascadeBy(function(node) {node.set('checked', true);});//                                record.expand();  联动效果 自动收起 自动展开//                                record.expandChildren();
                            } else {//                                record.collapse();//                                record.collapseChildren();
                                record.cascadeBy(function(node) {node.set('checked', false);});record.bubble(function(parentNode) {var childHasChecked = false;var childNodes = parentNode.childNodes;if (childNodes || childNodes.length > 0) {for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].data.checked) {childHasChecked = true;break;}}}if (!childHasChecked) {parentNode.set('checked', false);}});}}}},root: {text: 'Root',expanded: true, //是否展开子节点，默认为false
                    checked: true,children: [{ id: '1', text: 'Child 1', checked: true, leaf: true },{ id: '2', text: 'Child 2', checked: true, leaf: true },{ id: '3', text: 'Child 3', checked: true, expanded: true, children: [{ id: '4', text: 'Grandchild', checked: true, leaf: true}] }]}});
 //窗体var win = new Ext.Window({title: '窗口',width: 476,height: 574,resizable: true,modal: true,closable: true,maximizable: true,minimizable: true,items: tree});win.show();var attr = tree.getChecked();for (var le = 0; le < attr.length; le++) {var json = eval(attr[le].getData());
　　　　　　　　　　　　json.text;}}); </script>

root：是树的根节点。

checked: true 树有选择框。

onCheckboxChange：设置树连及效果，父级选中后 所有子集也全部选中。

getChecked()：获取所有选择的 树节点数据。

getChecked()下的getData()获取每个节点的数据 。