首先来创建一个store数据源
var store = Ext.create('Ext.data.TreeStore',{ root: { expanded: false,//默认不展开 children: [ //这里是树的节点 有层级的 { text: "一级节点",leaf: true,id:'firstNode',checked:false },{ text: "一级节点1",expanded: true,checked:false,children: [ { text: "二级节点",{ text: "二级节点1",checked:false} ] },{ text: "无限加载子节点",leaf: false,checked:false } //leaf:false表示有下级节点 ] } });
接下来创建tree对象
return Ext.create('Ext.tree.Panel',{ //此处我是在方法中return 的 如需直接渲染的朋友 应使用renderTo title: 'Simple Tree',id:'tree',width: 500,height: 350,store: store,autoEncode: true,//提交时是否自动编码 //selModel: new Ext.tree.MultiSelectionModel(),// 支持多选的选择模型 rootVisible: false,listeners:{ beforeitemexpand:function(node,optd){ //展开节点之前触发 var tt=node.data.text; store.setProxy({ //异步从服务器上加载数据 extjs会自动帮我们解析 type:'ajax',url:'SyncTreeServlet',extraParams:{time:tt} //额外参数 }); } },bbar: [{ //剩下的 按钮功能都是无关紧要的了 text: "向上按钮",tooltip: "向上选择一个节点",tooltipType: "qtip",handler: function(){ var model = Ext.getCmp("tree").getSelectionModel();//获取选择模型 model.selectPrevIoUs(); } },{ text: "向下按钮",tooltip: "向下选择一个节点",handler: function(){ var model = Ext.getCmp("tree").getSelectionModel();//获取选择模型 model.selectNext(); } },{ text: "获取值",tooltip: "获取被选节点的值",handler: function(){ var model = Ext.getCmp("tree").getSelectionModel();//获取选择模型 var selectedNode = model.getSelection();//获取选择的节点 console.info(selectedNode); if(selectedNode&&selectedNode.length>0){ Ext.MessageBox.alert("hint",selectedNode[0].data.text); } } }],tbar:[{ text: "添加节点",tooltip: "添加树节点",handler: function(){ Ext.MessageBox.prompt("输入","请输入新节点的名称:",function(btn,txt){ if(btn == "ok"){ var tree = Ext.getCmp("tree"); var newNode = new Ext.tree.Panel({text: txt,leaf: true}); var selNode = tree.getSelectionModel().getSelection(); if(selNode&&selNode.length>0){ //Ext.Msg.alert("错误","在添加新节点之前请先选择参照节点!"); selNode[0].appendChild(newNode); tree.getSelectionModel().clearSelections(); //清除所有选择节点 如不清楚 即使删除所有节点 获取选中节点时依旧会有一行选中数据 }else{ tree.getRootNode().appendChild(newNode); tree.getSelectionModel().clearSelections(); //清除所有选择节点 } } }); } },{ text: "删除节点",tooltip: "删除选择的树节点",handler: function(){ var tree = Ext.getCmp("tree"); var selNode = tree.getSelectionModel().getSelection(); if(!selNode||selNode.length<1){ Ext.Msg.alert("错误","请选择一个节点!"); }else{ selNode[0].remove(); tree.getSelectionModel().clearSelections(); //清除所有选择节点 } } },{ text: "修改节点",tooltip: "修改选择的树节点","请选择一个节点!"); }else{ Ext.MessageBox.prompt("输入","请输入节点的新名称:",txt){ if(btn=="ok"){ selNode[0].set("text",txt); selNode.updateInfo(true); Ext.Msg.alert("hint","修改完成!"); tree.getSelectionModel().clearSelections(); //清除所有选择节点 } }); } } }],renderTo: Ext.getBody() });
最后 放上 服务器返回的json数据格式
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { response.setCharacterEncoding("utf-8"); Writer out = response.getWriter(); StringBuffer sb = new StringBuffer("["); for (int i = 0; i < 4; i++) { int id = (int) (Math.random()*100000); //System.out.println("id:=================>"+id); sb.append("{id:"+id+",text:'异步节点"+i+"',checked:false},"); } sb.append("]"); out.write(sb.toString()); }
最后结果如图:
原文链接:https://www.f2er.com/ajax/163653.html