EXTJS5的学习记录之TreePanel树的本地加载与异步加载

前端之家收集整理的这篇文章主要介绍了EXTJS5的学习记录之TreePanel树的本地加载与异步加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先来创建一个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

猜你在找的Ajax相关文章