现在的位置: 首页 > 综合 > 正文

extjs4 tree总结

2013年05月12日 ⁄ 综合 ⁄ 共 3477字 ⁄ 字号 评论关闭

一.Ext.tree.panel 继承了 Ext.panel.Table 事件为:itemclick

1.1
tree node 的单击事件,看到 Ext.data.Model record 在这里你可以理解为NodeInterface的实现,所以可以用model直接appednChild 

1.2 定义数据源 继承TreeStore

    reader的root属性:表示从哪读取数据, 默认为'children',
需要放在proxy中配置。

   nodeParam: 发送请求时的参数名字,默认为
'node'

   store 里面存在的每一个节点 都是一个model。



二、间隔时间 调用tree节点

itemclick:function(tree,record, item,index, e,eOpts){		
		//1.添加树的子节点	
		record.appendChild({
			text:'test1',
			leaf:true
		});
		//2.添加树的前个兄弟节点	
		record.previousSibling.appendChild({
			text:'test1',
			leaf:true
		});

    }

Ext.define('LP.store.WestTreeStore',{
    extend: 'Ext.data.TreeStore',
    proxy: {
        type: 'ajax',
        url: extPath+'/layout!tree.action',
	   reader:{
	    	type:'json',
	    	root: 'data',
	        totalProperty: 'totalCount'
	    },
	api:{
		update:extPath+'/layout!tree.action'
	   },
	extraParams:{times:1}  
    },
    fields:[
		{name:'text',   type:'string'},
		{name:'count',   type:'int'},
		{name:'id',   type:'int'},
		{name:'leaf',   type:'boolean'}

	],
 	nodeParam:"nodeId",
	root:{
		id:-1,
		text:'root',
		leaf:false,
		expanded:true
	},
	sorters:[{
		property:"id",
		direction:"asc"
	}]
})

loadMenu:function(view,record, item,index, e,eOpts){
		var url = Ext.getCmp('west-tree').getStore().getProxy().api['update'];
		var i =  Ext.getCmp('west-tree').getStore().getProxy().extraParams.times+1
		//如果不是叶子 执行加载
		if(!record.get('leaf')){
			var node = Ext.getCmp('west-tree').getStore().getNodeById(record.get('id'));

			var nodeArray = [] ;
			
			var flag;
			if(!node.isExpanded()){
				node.expand();

				flag = window.setInterval(function(){
		         	this.ajaxRequestTree(record,url);
		     	 } ,  500 );

		     	ajaxRequestTree = function(record,url){
		     		Ext.Ajax.request({
						url: url,
						params:{nodeId:record.get('id'),times:i++},
						method : 'post', //方法,
						timeout:4000,
						callback : function(options, success, response) {
							var obj = Ext.JSON.decode(response.responseText);

							if(obj.totalCount == 'end'){
								window.clearInterval(flag);
								record.appendChild(nodeArray);
								return false;
							}else{
								var totalCount = obj.totalCount;
								var datas = obj.data;

								nodeArray.push(datas);

								/*Ext.each(datas,function(data){
									record.appendChild(data);
								})*/
							}
						}
					});
     		}
				record.updateInfo();
			}else{
				node.collapse();

			}
		}
		//this.GridUtil.createTabPanel(record);

    }


/**
	 *
	 * 获得左侧树节点
	 *
	 * @return String
	 */
	public String tree(){

		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();

		String result = request.getParameter("nodeId");
		oplogE.debug("*****************"+request.getParameter("nodeId"));

		if("-1".equals(request.getParameter("nodeId"))){
			result = "{\"totalCount\":200,data:["
				+ "{text:\"总公司1\",count:20,id:100,leaf:false},"
				+ "{text:\"总公司2\",count:80,id:120,leaf:false}]"
				+ "}";

		}else if("100".equals(request.getParameter("nodeId"))){
			result = "{\"totalCount\":200,data:["
					+ "{text:\"我的总公司1--分公司1\",count:20,id:1110,leaf:true},"
					+ "{text:\"我的总公司1--分公司2\",count:80,id:1111,leaf:true}]"
					+ "}";

		}else if("120".equals(request.getParameter("nodeId"))){
			/*result = "{\"totalCount\":200,data:["
					+ "{text:\"总公司2--分公司1\",count:20,id:1210,leaf:true},"
					+ "{text:\"总公司2--分公司2\",count:80,id:1211,leaf:true}]" + "}";*/
			int times = 1;
			if(request.getParameter("times") != null){
				times  = Integer.parseInt(request.getParameter("times"));
				System.out.println("times===================="+times);
			}

			if(times >= 10){
				result = "{\"totalCount\":'end',data:''}";
			}else{
				int begin = (times - 1)* 10;
				int end = begin + 10;
				List items = new ArrayList();

				for(int i=begin;i<end;i++){
					User user = new User();
					user.setText("总公司"+i+"--分公司"+i);
					user.setCount(1000+i);
					user.setId(1000+i);
					user.setLeaf(true);
					items.add(user);
				}
				JSONArray jsonArray = JSONArray.fromObject( items );
				result = "{\"totalCount\":2000,data:" + jsonArray + "}";
			}

		}
		try {
			response.setCharacterEncoding("utf-8");
			oplogE.debug("设置字符编码是 utf-8 ");
			response.getWriter().write(result);
		} catch (IOException e) {
			e.printStackTrace();
		}

		return null;
	}

抱歉!评论已关闭.