1、范例包含以下功能点:
节点包含复选框
单击节点触发事件
取得所有选中的节点(包括节点获取焦点和复选框选中两种情况)
2、范例源码
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif"; Ext.QuickTips.init(); var root = new Ext.tree.TreeNode({ id: "root", text: "根节点" }); root.appendChild(new Ext.tree.TreeNode({ text: "子节点1", checked: false })); var node2 = new Ext.tree.TreeNode({ id: "node2", text: "子节点2" }); node2.appendChild(new Ext.tree.TreeNode({ text: "二级菜单", checked: false })); root.appendChild(node2); var tree = new Ext.tree.TreePanel({ title: "树面板(Ext.tree.TreePanel)", renderTo: Ext.getBody(), width: 300, height: 300, tbar: [ { text: "selected", handler: function(){ var sm = tree.getSelectionModel(); //用于单选模式 /* var node = sm.getSelectedNode(); if(node!=null){ alert(node.text); }else{ alert("没有节点被选中!"); } */ //用于多选模式 var nodes = sm.getSelectedNodes(); var length = nodes.length; if(length>0){ alert("当前选中" + length + "个节点"); }else{ alert("没有节点被选中!"); } } }, { text: "checked", handler: function(){ var msg = ""; var nodes = tree.getChecked(); Ext.each(nodes, function(node){ if(msg.length>0) msg += ", "; msg += node.text; }); if(msg.length>0) alert(msg); } } ], listeners: { "click": function(node, event){ var toolbar = tree.getBottomToolbar(); toolbar.items.item(0).setText("当前选中的节点:" + node.text); } }, bbar: [ "当前选中的节点:" ], root: root, useArrows: true, selModel: new Ext.tree.MultiSelectionModel() }); tree.getRootNode().expand(true); //级联展开所有子节点 //alert(tree.getNodeById("node2").getPath()); //获取节点的text属性值 });
3、点击节点后在TabPanel增加一个页签
function addTab(node){ if(node.isLeaf()==false) return; var tabs = Ext.getCmp("tabs"); if(node.attributes.action){ for(var i=1;i<tabs.items.length;i++){ tabs.remove(tabs.items.item(i)); } tabs.add({ title: node.text, closable: true, autoLoad: node.attributes.action }).show(); } }