树组件：普通树范例

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