`
ybb35789
  • 浏览: 1598 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

ext columntree 不能动态加载数据 有哪位大哥帮忙看下 在线等

阅读更多

    最近用ext做项目开发,其中有两棵树是用到ext的columntree,第一棵树因为数据量小,一次性加载所以没什么问题,但是第二棵数据量大,要异步获取数据,就出现了问题:

   根节点 ext会自动去加载解析并创建子节点,第二级节点就只会发送请求,不会去创建,而且加载节点的那个动态的图表也没有了,但是第三级节点ext又会自动去加载解析并创建子节点,这个问题搞了两天去了,实在是没办法了。

希望哪位朋友帮忙解决下

 

 

将原来的js加上fy_colunm_tree.on("expandnode",getNodes);事件后,就没有原来columntree树的效果,而且不设置text属性节点就只有个文件价

 

 fy_colunm_tree = new Ext.tree.ColumnTree({
	  	 	id:'fycolunmtree',
	        width: 680,
	        height:370,
	        border: false,   
		    lines: false,   
		    animate: false,   
		    rootVisible: true,   
		    autoDestory:true,
		    autoScroll:true,   
		    checkModel:'cascade',//级联多选,如果不需要checkbox,该属性去掉   
		    onlyLeafCheckable: false,//所有结点可选,如果不需要checkbox,该属性去掉     

	        autoScroll:true,
			expanded:true,
			enableDD:true,
	        renderTo: 'tree-ct-fy-colunm',
	        tbar: [{
				text:'确定',
				listeners: {
					'click': function() {
						alert(findCheckedNodes());
					},
					scope:this
				}
			},{
				text:'取消',
				listeners: {
					'click': function() {
						FyColunmTreeWin.hide();
					},
					scope:this
				}
			}],
	        columns:[{
	            header:'树',
	            width:330,
	            dataIndex:'mod_cn'
	        },{
	            header:'级别',
	            width:700,
	            dataIndex:'right_nm'
	        }],
	
	        loader: new Ext.tree.TreeLoader({
	            dataUrl:'include/fyColunmTree.jsp?type=gy',
	            preloadChildren:true,
	           // directFn:getNodes,
	            uiProviders:{
	                'col': Ext.ux.ColumnTreeCheckNodeUI
	            }
	        }),
	
	        root:root
	        
	    });
	} 
		
		fy_colunm_tree.on("beforeload",function(node){
			//debugger;
			var parameter = '';
			if(node.attributes.id==-1){
				parameter='type=zjfy&id=440000&fydm=&bmdm=&leves=6';
			}else{
				parameter = 'type='+toundefinedvalue(node.attributes.nextType)+'&fydm='+toundefinedvalue(node.attributes.fydm)
				+'&bmdm='+toundefinedvalue(node.attributes.bmdm)+'&id='+toundefinedvalue(node.attributes.id)+'&leves='
				+toundefinedvalue(node.attributes.leves);
			}
			//debugger;
			node.loader= new Ext.tree.TreeLoader( {
					dataUrl:'include/fyColunmTree.jsp?'+parameter,
					//directFn:getNodes,
               		 uiProviders:{
	                'col': Ext.ux.ColumnTreeCheckNodeUI
	            }
			});
			
		});
//		
		fy_colunm_tree.on("expandnode",getNodes);

		
		function getNodes(node){
			fy_colunm_tree.un("beforeload");
			var parameter = '';
			if(node.attributes.id==-1){
				parameter='type=gy';
			}else{
				parameter = 'type='+toundefinedvalue(node.attributes.nextType)+'&fydm='+toundefinedvalue(node.attributes.fydm)+'&bmdm='+toundefinedvalue(node.attributes.bmdm)+'&id='+toundefinedvalue(node.attributes.id)+'&leves='+toundefinedvalue(node.attributes.leves);
			}
			
//		 node.loader= new Ext.tree.TreeLoader( {
//				dataUrl:'include/fyColunmTree.jsp?'+parameter,
//				//directFn:getNodes,
//              		uiProviders:{
//                	'col': Ext.tree.ColumnTreeNodeUI
//	            }
//		});
//		debugger;
//		if(!node.isLoaded()){
//			node.reload();
//		}
           
           //node.un("expand");
			if(!node.leaf && node.getDepth()!=0){
				Ext.Ajax.request({   
			    url: 'include/fyColunmTree.jsp?'+parameter,     
			    method: 'GET',   
			    success: function(response){  //成功返回   
			     var jsonObj = Ext.util.JSON.decode(response.responseText); // 得到服务器返回的json串,并用json.js解析过对象数组 
			     debugger;
			     if(!node.firstChild){
			     	 for(var i=0;i<jsonObj.length;i++ ){
			            var childNode=new Ext.tree.AsyncTreeNode({
			            	//text:jsonObj[i].mod_cn,
               				 id:jsonObj[i].id,
          				 draggable:false,
        				 leaf:jsonObj[i].leaf,
    				 cls:jsonObj[i].cls,
      				 iconCls:jsonObj[i].cls,
           			                 baseAttrs: { uiProvider: Ext.ux.ColumnTreeCheckNodeUI} 
			            });
			            childNode.attributes.fydm=jsonObj[i].fydm;
			            childNode.attributes.bmdm=jsonObj[i].bmdm;
			            childNode.attributes.mod_cn=jsonObj[i].mod_cn;
			            childNode.attributes.right_nm=jsonObj[i].right_nm;
			            //childNode.attributes.leaf=jsonObj[i].leaf;
			            childNode.attributes.nextType=jsonObj[i].nextType;
			            childNode.attributes.type=jsonObj[i].type;
			            childNode.attributes.leves=jsonObj[i].leves;
			            childNode.attributes.pid=jsonObj[i].pid;
			            childNode.attributes.id=jsonObj[i].id;
			            childNode.attributes.checked=jsonObj[i].checked;
			            childNode.attributes.expandable=jsonObj[i].expandable;
			           // childNode.attributes.cls=jsonObj[i].cls;
			            childNode.attributes.baseAttrs= { uiProvider: Ext.ux.ColumnTreeCheckNodeUI} ;
			            node.appendChild(childNode);//将当前节点添加为待展开节点子节点  
			           // debugger; 
			           var parameter = '';
						if(node.attributes.id==-1){
							parameter='type=gy';
						}else{
							parameter = 'type='+toundefinedvalue(node.attributes.nextType)+'&fydm='+toundefinedvalue(node.attributes.fydm)+'&bmdm='+toundefinedvalue(node.attributes.bmdm)+'&id='+toundefinedvalue(node.attributes.id)+'&leves='+toundefinedvalue(node.attributes.leves);
						}
			          
			      }   
			     }  
			    
//			     // node.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)   
			    },   
			    failure: test1
			   });   

			}
			
		}
		function test1(){
		}
		function toundefinedvalue(value){
			if(value == undefined || value == 'undefined'){
				return '';
			}else{
				return value;
			}
		}
	    //选择树的时候触发的事件
//		fy_colunm_tree.on('check',function(node){
//			   var checkbox=document.getElementsByName(node.id);
//			   node.getUI().checkbox.value=node.id;
//			   //debugger;
//			   if(node.attributes.checked){
//				   for(var i=0;i<checkbox.length;i++){
//				   	   checkbox[i].checked='checked';
//				   }
//			   }else{
//			   	   for(var i=0;i<checkbox.length;i++){
//				   	   checkbox[i].checked='';
//				   }
//			   }	
//	        });
	  	 //root.expand(false,false);
	  	 var fyColunmObj = {fydm:'',fylev:'',bmdm:'',hytdm:'',rydm:''};
	  	 findCheckedNodes = function(){
	  	 	var checkedNodes = fy_colunm_tree.getChecked();
	  	 	var dm='';
	  	 	if(checkedNodes){
	  	 		for(var i=0;i<checkedNodes.length;i++){
	  	 			if(dm==''){
	  	 				dm+=checkedNodes[i].attributes.id
	  	 			}else{
	  	 				if(checkedNodes[i-1].attributes.type!=checkedNodes[i].attributes.type && checkedNodes[i].attributes.type=='fy'){
	  	 					dm+="|"+checkedNodes[i].attributes.id;
	  	 				}else if(checkedNodes[i-1].attributes.type!=checkedNodes[i].attributes.type && checkedNodes[i].attributes.type=='bm'){
	  	 					dm+="-"+checkedNodes[i].attributes.id;
	  	 				}else if(checkedNodes[i-1].attributes.type!=checkedNodes[i].attributes.type && checkedNodes[i].attributes.type=='hyt'){
	  	 					dm+="="+checkedNodes[i].attributes.id;
	  	 				}else if(checkedNodes[i-1].attributes.type!=checkedNodes[i].attributes.type && checkedNodes[i].attributes.type=='hyt'){
	  	 					dm+="_"+checkedNodes[i].attributes.id;
	  	 				}else{
	  	 					dm+=":"+checkedNodes[i].attributes.id;
	  	 				}
	  	 			}
	  	 		}
			}
			return dm;
//	  	 	var fydm='';
//	  	 	var bmdm='';
//	  	 	var hytdm='';
//	  	 	var rydm='';
//	  	 	var fybmdm='';
//	  	 	if(checkedNodes){
//	  	 		for(var i=0;i<checkedNodes.length;i++){
//	  	 			checkedNodes[i];
//		  	 		if(node.attributes.type=='fy'){
//		  	 			if(bmdm==''){
//		  	 				bmdm+= fybmdm;
//		  	 			}else{
//		  	 				bmdm+=":"+fybmdm;
//		  	 			}
//		  	 			fybmdm='';
//		  	 			if(fydm==""){
//		  	 				fydm += node.attributes.id;
//		  	 			}else{
//		  	 				fydm += ":"+node.attributes.id;
//		  	 			}
//		  	 		}
//		  	 		if(node.attributes.type=='bm'){
//		  	 			var curfydm = fydm.split(":")[fydm.split(":").length-1];
//		  	 			if(fybmdm==""){
//		  	 				if(node.attributes.pid==curfydm){
//		  	 					fybmdm += node.attributes.id;
//		  	 				}
//		  	 			}else{
//		  	 				fybmdm += ","+node.attributes.id;
//		  	 			}
//		  	 		}
//		  	 		
//	  	 		}
//	  	 	}
	  	 }
	  });	  
	  

 

分享到:
评论

相关推荐

    Ext 动态加载表单数据

    在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...

    ext复选框的ColumnTree扩展包

    "ext复选框的ColumnTree扩展包"是EXT框架的一个扩展,它为ColumnTree添加了复选框功能。这使得用户可以在树形结构中进行多选操作,极大地提高了交互性和数据处理效率。这个扩展包包括了所有必要的JavaScript和CSS...

    ext树 无限级 json 数据格式 动态加载

    在EXT JS这个强大的JavaScript库中,树形组件...总的来说,EXT树的无限级JSON动态加载涉及数据结构、JSON格式、数据存储以及异步加载等多个方面,理解并熟练运用这些技术,能够帮助我们构建更加高效和灵活的树形界面。

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在实际项目中,结合`jq`库(可能是jQuery的简写),可以方便地处理DOM操作,与EXTJS的组件交互,进一步增强动态加载的效果,比如添加动态加载的动画、错误处理等。 总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是...

    简单的EXT加载数据的例子

    在这个例子中,“简单的EXT加载数据的例子”可能是指如何动态地从服务器获取数据并加载到Treepanel中。 1. **创建Treepanel** 创建Treepanel时,我们需要指定一些基本配置,如ID、标题、宽度、高度等。此外,还...

    EXT4.3实现动态表单全动态

    - **响应式设计**:EXT4.3支持响应式布局,可以自适应不同设备和屏幕尺寸,确保动态表单和grid在各种环境下都能正常显示。 - **事件处理**:利用EXT4.3丰富的事件系统,如`beforeedit`、`itemdblclick`等,实现...

    Ext4 动态加载js例子

    通过研究这个示例,你将能更好地理解如何在实际项目中应用动态加载,从而优化你的 Ext4 应用程序。 总之,`Ext.Loader` 是 Ext4 的一个重要特性,它提高了代码的可维护性和应用程序的性能。通过合理地利用动态加载...

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    ext grid数据绑定

    EXT Grid通常使用Store对象来处理数据模型,Store可以连接到各种数据源,如JSON、XML或者远程API,通过Ajax请求加载数据。 1. 数据绑定(Data Binding): 数据绑定是EXT Grid的核心特性之一,它允许Grid与数据源...

    Ext的gridpanel控件二次加载问题

    总之,解决Ext的gridpanel控件二次加载时丢失的问题需要对Ext JS的生命周期管理有深入的理解,并结合实际应用场景选择合适的策略。无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理...

    Ext中TabPanel的动态页面加载

    本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,我们可以避免一次性加载所有标签页内容,从而改善用户体验,减少初次加载时的网络负担。 ...

    ext4.0动态加载示例

    在“ext4.0动态加载示例”中,我们主要关注的是如何利用Ext JS 4.0的特性实现数据的动态加载。动态加载是一种优化应用性能和用户体验的技术,允许应用程序根据需要只加载必要的数据,而不是一次性加载所有数据,这样...

    基于EXT2.0.2表格间数据拖拽

    DataStore通常与XML或者JSON数据源连接,可以动态加载和更新数据。在Grid中,我们可以通过配置ColumnModel来定义显示的列。 实现拖拽功能的关键在于扩展EXT的GridPanel类,添加DragDrop支持。这通常涉及以下几个...

    Ext数据模型Store

    EXT提供了如`XmlReader`、`JsonReader`和`ArrayReader`等不同的Reader,它们能解析不同格式的数据,并将解析结果转化为Record对象,Record是数据集中的单条记录,包含一系列定义好的DataField,每个DataField定义了...

    EXT实现动态树的功能

    TreePanel是EXT中用于展示树状结构数据的核心组件,它可以动态加载数据并提供多种交互方式。创建一个动态树的第一步是实例化一个TreePanel,并配置其属性,如根节点、数据源以及节点的渲染样式等。 ```javascript ...

    ext grid 动态扩展

    在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...

    Ext tree json 动态加载完美实例

    在本文中,我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载,并实现多选和单选功能。Ext JS是一种强大的JavaScript库,用于构建富客户端应用,而Tree Panel则是展示层次结构数据的一种组件。在后台...

    DWR方式动态加载EXT.Tree

    当我们谈论“DWR方式动态加载EXT TreePanel”时,意味着我们需要使用DWR来获取服务器端的数据,并将其动态地填充到EXT TreePanel中,以实现数据的实时更新和交互性。这种技术的应用场景可能包括:当用户需要查看或...

    EXT2.0动态树,分页!

    EXT2.0通过异步加载数据来实现动态性,只在需要时加载树节点,这减少了初次加载时的数据量,提高了页面响应速度。 分页是另一种优化数据展示和处理的方法,尤其适用于处理大量数据的情况。EXT2.0提供了分页网格组件...

    Ext列表特效(远程加载数据)

    1、Ext版本:3.2.1; 2、运行环境:VS 2008 以上; 3、远程加载数据,数据在程序中生成,无需连接数据库或XML文件; 4、运用Viewport管理页面布局 5、GridPanel的各种功能和特效

Global site tag (gtag.js) - Google Analytics