Ext Tree学习小结

来源：互联网发布：做噩梦知乎编辑：程序博客网时间：2024/04/28 02:48

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

Ext.create("Ext.tree.Panel",{    renderTo: Ext.getBody(),    title:'人员管理',    width:120,    height:150root:{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中，欢迎交流

0 0