最近用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 JS这个强大的JavaScript框架中，动态加载表单数据是一种常见的功能需求，特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能，以便于灵活地更新和显示表单内容。 首先，...
"ext复选框的ColumnTree扩展包"是EXT框架的一个扩展，它为ColumnTree添加了复选框功能。这使得用户可以在树形结构中进行多选操作，极大地提高了交互性和数据处理效率。这个扩展包包括了所有必要的JavaScript和CSS...
在EXT JS这个强大的JavaScript库中，树形组件...总的来说，EXT树的无限级JSON动态加载涉及数据结构、JSON格式、数据存储以及异步加载等多个方面，理解并熟练运用这些技术，能够帮助我们构建更加高效和灵活的树形界面。
在实际项目中，结合`jq`库（可能是jQuery的简写），可以方便地处理DOM操作，与EXTJS的组件交互，进一步增强动态加载的效果，比如添加动态加载的动画、错误处理等。 总结来说，`Ext.Panel`和`TreePanel`在EXTJS中是...
在这个例子中，“简单的EXT加载数据的例子”可能是指如何动态地从服务器获取数据并加载到Treepanel中。 1. **创建Treepanel** 创建Treepanel时，我们需要指定一些基本配置，如ID、标题、宽度、高度等。此外，还...
- **响应式设计**：EXT4.3支持响应式布局，可以自适应不同设备和屏幕尺寸，确保动态表单和grid在各种环境下都能正常显示。 - **事件处理**：利用EXT4.3丰富的事件系统，如`beforeedit`、`itemdblclick`等，实现...
通过研究这个示例，你将能更好地理解如何在实际项目中应用动态加载，从而优化你的 Ext4 应用程序。 总之，`Ext.Loader` 是 Ext4 的一个重要特性，它提高了代码的可维护性和应用程序的性能。通过合理地利用动态加载...
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
EXT Grid通常使用Store对象来处理数据模型，Store可以连接到各种数据源，如JSON、XML或者远程API，通过Ajax请求加载数据。 1. 数据绑定（Data Binding）： 数据绑定是EXT Grid的核心特性之一，它允许Grid与数据源...
总之，解决Ext的gridpanel控件二次加载时丢失的问题需要对Ext JS的生命周期管理有深入的理解，并结合实际应用场景选择合适的策略。无论是使用全局变量还是优化加载机制，关键在于确保GridPanel实例和数据的正确管理...
本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载，这在构建可扩展且高效的Web应用时非常关键。通过动态加载，我们可以避免一次性加载所有标签页内容，从而改善用户体验，减少初次加载时的网络负担。 ...
在“ext4.0动态加载示例”中，我们主要关注的是如何利用Ext JS 4.0的特性实现数据的动态加载。动态加载是一种优化应用性能和用户体验的技术，允许应用程序根据需要只加载必要的数据，而不是一次性加载所有数据，这样...
extjs 可编辑的表格树，每个单元格自定义编辑组件，可以自适应列宽，只有源码与例子，运行实例要修改路径，不然图片不能显示，注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo ： codeme9@gmail....
DataStore通常与XML或者JSON数据源连接，可以动态加载和更新数据。在Grid中，我们可以通过配置ColumnModel来定义显示的列。 实现拖拽功能的关键在于扩展EXT的GridPanel类，添加DragDrop支持。这通常涉及以下几个...
EXT提供了如`XmlReader`、`JsonReader`和`ArrayReader`等不同的Reader，它们能解析不同格式的数据，并将解析结果转化为Record对象，Record是数据集中的单条记录，包含一系列定义好的DataField，每个DataField定义了...
TreePanel是EXT中用于展示树状结构数据的核心组件，它可以动态加载数据并提供多种交互方式。创建一个动态树的第一步是实例化一个TreePanel，并配置其属性，如根节点、数据源以及节点的渲染样式等。 ```javascript ...
在EXT JS中，`Ext Grid` 是一个强大的数据展示组件，它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列，增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...
在本文中，我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载，并实现多选和单选功能。Ext JS是一种强大的JavaScript库，用于构建富客户端应用，而Tree Panel则是展示层次结构数据的一种组件。在后台...
当我们谈论“DWR方式动态加载EXT TreePanel”时，意味着我们需要使用DWR来获取服务器端的数据，并将其动态地填充到EXT TreePanel中，以实现数据的实时更新和交互性。这种技术的应用场景可能包括：当用户需要查看或...
EXT2.0通过异步加载数据来实现动态性，只在需要时加载树节点，这减少了初次加载时的数据量，提高了页面响应速度。 分页是另一种优化数据展示和处理的方法，尤其适用于处理大量数据的情况。EXT2.0提供了分页网格组件...