Extjs中TreePanel树异步加载数据的步骤
1.定义根节点root:
var myRoot = new Ext.tree.AsyncTreeNode({ text:"根节点", draggable:false, //根节点不可拖动 expanded:true, //根节点展开 });
2.定义数据加载器TreeLoader:
var myLoader = Ext.tree.TreeLoader({ dataUrl:"getTree.do?doType=getTreeById", baseParams:{name:""}, baseAttrs:{uiprovider:Ext.tree.TreeCheckNodeUI}//必须有该项,不然树节点无法出现选择框 });
注意:url属性名称为:dataUrl (store的是url)
3.定义数据加载前触发方法:beforeload
myLoader.on("beforeload",function(treeLoader,node){ treeLoader.baseParams.pid = node.id; },this);
4.定义树面板,用于显示数据:
var myTree = new Ext.tree.TreePanel({ root: myRoot, loader:myLoader, checkModel: 'multiple', //复选框多选 animate:false, //无动画 onlyLeafCheckable: true, enableDD:false, //子节点不能拖动 border:false, rootVisible:true, //根节点可见 autoScroll :true, lines: false, //节点间用线连接 tbar:[ { xtype:'label', text:"文件号:" },{ xtype:"textfield", id:"serchFor5", allowBland:true, width:120 },{ text:"查找", iconCls:"filter", handler : function(){ cNode = departTree.getSelectionModel().getSelectedNode(); var selectedNodeID; if(cNode){ selectedNodeID = cNode.id; } var searchFor = Ext.getCmp("searchFor5").getValue(); if(searchFor=='') return; var startNodeID = null; //New search 新的查找 if(lastSearch != '' && lastSearch == searchFor) {// Find next 查找下一个 if(selectedNodeID && selectedNodeID != 'tree-root'){ startNodeID = selectedNodeID ; } } lastSearch = searchFor; //调用服务端查找 Ext.Ajax.request({ url : 'getIndustry.base?doType=searchPolicy', params : {searchFor: searchFor, startID :startNodeID}, success : onSearchSuccessCallback, failure : function(response,option) { Ext.Msg.alert("失败","查找过程发生错误!"); } }); } } ] });
后台获取数据代码:TODO......