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......