Ext Tree学习小结

这两天用Ext做了个树，期间碰到不少问题，不过总算弄好了，小结下树的用法，日后可以再看看。
1.树形面板Ext.tree.Panel
tree.Panel提供了展示树结构数据的界面，下面是一个简单地例子

Ext.create("Ext.tree.Panel",{
    	renderTo: Ext.getBody(),
    	title:'人员管理',
    	width:120,
    	height:150
	root:{
		text:'树根',//节点名称
		expanded:true,//默认展开根节点
		children:[{
			text:'节点1',
			leaf:true//true说明为叶子节点
		},{ 
			text:'节点2',
			leaf:true//true说明为叶子节点
		}]
	}
    });

2.Ext.data.TreeStore
它是Ext.data.Tree接口的实现，提高了加载节点的便利方法，下面是一个例子
TreeStore的Model

Ext.define('AM.model.Company',{
  	extend: 'Ext.data.Model',
  	fields:[ //这些属性必须指定
  		{name:'id'},
		{name:'text'},
  		{name:'parent_id'},
		{name:'expanded'},
  		{name:'leaf'}
  	]
 	})

下面是TreeStore

Ext.define('AM.store.Companies',{
  	extend:'Ext.data.TreeStore',
  	requires:[
  	'AM.model.Company'
  	],
  	model:'AM.model.Company',
	nodeParam:'parent_id',//根据nodeParam来组织树
  	proxy:{
  		type:'ajax',
  		actionMethods:'post',
  		url:'user/getCompany.do',
  		reader:{
  			type:'json',
  			totalProperty:'total',
  			root:'data',
  			messageProperty:'message'
  		}
  	},
  	sorters:[{
  		property:'id',
  		direction:'ASC'
  	}],
  	root: { //根节点
  		id:0,
  		text:'网络公司',
  		leaf:false,
  		expanded:false
	}
 })

下面是加载TreeStore的Panel

Ext.create("Ext.tree.Panel",{
    itemId:'userTree',
    region:'west',
    title:'人员管理',
    width:120,
    height:150,
    store :treeStore,
    rootVisible : true      //根节点是否可见
    }) 

这样就可以从后台加载树了，单击树节点，加载该节点下的列表，可以像下面这样：

itemclick:function(view,record,item,index){
var proxy=view.store.getProxy();   //得到TreeStore的Proxy代理
proxy.extraParams={
    'text':record.get('text');}     //得到节点上的text值
    view.store.load();           //加载TreeStore
}

后台根据text值查询符合条件的记录，并发送给页面

初学Ext中，欢迎交流