最近研究一下EXT4.1 Tree 加载 ,参考了一下API和网上的分享,分享一下成果,
构造treepanel
var orglist = new Ext.widget({ xtype: 'treepanel', id:'orglist', lines : false, title : "XXXX", width : 150, minSize : 100, maxSize : 200, region : "west", split : true, autoScroll : true, // 自动滚动 collapsible : true, containerScroll : true,// 是否支持滚动条 rootVisible : false, // 是否隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性 border : true, // 边框 animate : true,// 动画效果 listeners : { 'beforeload':function(store,operation,eOpts) { url = encodeURI(path+'/org/key/getOrgTree'+'?id=' + operation.node.data.id);//id标示点击的父节点 ,动态加载不会一次加载都有子节点 store.proxy.url = url; }, "itemclick":function(view,record,item,index,e ){ //点击树事件 此处为菜单树,点击菜单,右侧展示相应信息 可忽略此事件 var id=record.data.id; //节点id var text=record.data.text; //节点显示内容 var d=orgmessage.items.get(id); //orgmessage为右侧tabpanel与tree主题无关可忽略 if (d == null) { var tp = new Ext.widget({ xtype: 'panel', id : id, title : text, html : '<iframe src="' +path+'XXXX.jsp?Id='+id + '" width="100%" height="100%" frameborder="0" style="border:0" scrolling="auto"></iframe>' }); orgmessage.add(tp).show(); //显示tab页 } } }, store: store //动态加载数据 }); // var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: path+'/org/key/getOrgTree' //加载节点信息 }, root: { 跟节点 text: '1', id: '1', expanded: true }, folderSort: true, sorters: [{ //排序 property: 'text', direction: 'ASC' }] });
直接显示参考API
root: { expanded: true, text: "My Root", children: [ { text: "Child 1", leaf: true }, { text: "Child 2", expanded: true, children: [ { text: "GrandChild", leaf: true } ] } ] }
EXT4.1 不在支持AsyncTreeNode
root : new Ext3.tree.AsyncTreeNode({
text : root.tagName,
xmlNode : root
}),