tree中的一些事件处理

最新推荐文章于 2024-07-23 17:14:55 发布

w_l_j

最新推荐文章于 2024-07-23 17:14:55 发布

阅读量2k

点赞数

文章标签： tree function button ajax json 存储

本文链接：https://blog.csdn.net/w_l_j/article/details/7577337

版权

这个例子是在上一个例子的基础上进行的
(function() {
	Ext.onReady(function() {
		// 定义一个存储 数据的store
		var treeStore = Ext.create('Ext.data.TreeStore', {
			root : {
				text : '我是根节点',
				expanded : false// 是否展开
			},

			proxy : {
				type : 'ajax',
				url : 'users.jsp',
				reader : {
					type : 'json'
				}
}
		});
		/*
		 * tree概念 treePanel组件的基本应用
		 *  树的事件
		 * 展开     折叠    点击   双击  会调用相应的事件进行处理
		 * itemexpand    展开节点事件
		 * itemcollapse     折叠节点事件
		 * itemclick   单击事件
		 *  itemdblclick       双击事件
		 */
		var tree = Ext.create('Ext.tree.Panel', {
			title : '树形结构',
			renderTo : Ext.getBody(),
			width : 400,
			height : 800,
			rootVisible : true,// 根节点是否显示
			store : treeStore,
			tbar:[{//在底部添加按钮
				xtype:'button',
				id:'expand',
				text:'全部展开',
				handler:function(btn){
					var tr=btn.ownerCt.ownerCt;
					tr.expandAll();
				}
			},{
				xtype:'button',
				id:'collapse',
				text:'全部折叠',
				handler:function(btn){
					var tr=btn.ownerCt.ownerCt;
					tr.collapseAll();
				}
			}]
			
		});
		
		//触发事件
		/*tree.on('itemclick',function(v,record,item,index,e,eOpts){
			alert('触发事件'+record.data.text);
		});*/
		/*tree.on('itemexpand',function(){
			alert("..........展开事件.........");
		});*/
		/*tree.on('itemcollapse',function(){
			alert("...........折叠事件..........");
		});*/
		
	});
})();