ext tree, 怎样创建动态的子节点?, 当点击节点前面 + 图标时,去后台拿子节点的数据

时间:2022-06-18 12:35:40
ext tree, 怎样创建动态的子节点?, 当点击节点前面 + 图标时,去后台拿子节点的数据

9 个解决方案

#1


首先定义一个树加载器,如
var loadNode= new Tree.TreeLoader({dataUrl:yourUrl});
然后在树上绑定监听器
var tree = new Tree.TreePanel({
                id:'tree',
                region:'west',
                title:'LeftTree',
                autoScroll:true,
                root:left,
                 listeners: {
            'beforeload': loadNode
     }
            });

#2


二楼的, 这样做只能添加一级子节点, 当点击一级子节点上的 + 时,要添加二级子节点就办不到了

#3


var tree = new Tree.TreePanel({
                id:'tree',
                region:'west',
                title:'LeftTree',
                autoScroll:true,
                 loader:new Tree.TreeLoader({dataUrl:yourUrl})
            });

根节点定义为异步
new Ext.tree.AsyncTreeNode({
   id:'id',
   text:'text'
})

#4



tree = new Ext.tree.TreePanel({
  id:"treeMenu",
  loader: new Ext.tree.TreeLoader({
    dataUrl:'xxx.html',
    clearOnLoad:true})
}); 
root = new Ext.tree.AsyncTreeNode({
  id:'0',
  text: 'root',
});
tree.setRootNode(root);

页面基本上就这样,点击+号的时候会传id到指定的url,后台组装一下子节点对象数组就可以了,json或xml格式的

#5


当点击根节点时,会发送请求到get-nodes.php取得子节点数据,

然后希望点击子节点时, 会发送请求到get-nodes1.php页面取下一级子节点数据,
然实际上,它总是执行根节点的url,还是到get-nodes.php取数据

Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
width : 200,
height : 500,
autoScroll : true,
animate : true,
loader : {
dataUrl : 'get-nodes.php'
},
root : {
text : 'Ext JS'
}
});
});

get-nodes.php页面代码

[{
text : '2A folder Node',
dataUrl : 'get-nodes1.php'
}]

#6


这样就达到我的要求了

Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
width : 200,
height : 500,
autoScroll : true,
id : "test",
// useArrows: true,
animate : true,
loader : {
dataUrl : 'get-nodes.php',
baseParams : {
category : "category"
}
},
root : {
text : 'Ext JS'
}
});
});

// code in page get-nodes.php

[{
text : '2A folder Node',
listeners : {
beforeload : function(treeLoader) {
treeLoader.getLoader().baseParams = {
category : "changed"
};
}
}
}]

#7


这样就达到我的要求了

Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
width : 200,
height : 500,
autoScroll : true,
id : "test",
// useArrows: true,
animate : true,
loader : {
dataUrl : 'get-nodes.php',
baseParams : {
category : "category"
}
},
root : {
text : 'Ext JS'
}
});
});

// code in page get-nodes.php

[{
text : '2A folder Node',
listeners : {
beforeload : function(treeLoader) {
treeLoader.getLoader().baseParams = {
category : "changed"
};
}
}
}]

#8


很高兴楼主的问题已经解决

#9


遇到了同样地的问题...

#1


首先定义一个树加载器,如
var loadNode= new Tree.TreeLoader({dataUrl:yourUrl});
然后在树上绑定监听器
var tree = new Tree.TreePanel({
                id:'tree',
                region:'west',
                title:'LeftTree',
                autoScroll:true,
                root:left,
                 listeners: {
            'beforeload': loadNode
     }
            });

#2


二楼的, 这样做只能添加一级子节点, 当点击一级子节点上的 + 时,要添加二级子节点就办不到了

#3


var tree = new Tree.TreePanel({
                id:'tree',
                region:'west',
                title:'LeftTree',
                autoScroll:true,
                 loader:new Tree.TreeLoader({dataUrl:yourUrl})
            });

根节点定义为异步
new Ext.tree.AsyncTreeNode({
   id:'id',
   text:'text'
})

#4



tree = new Ext.tree.TreePanel({
  id:"treeMenu",
  loader: new Ext.tree.TreeLoader({
    dataUrl:'xxx.html',
    clearOnLoad:true})
}); 
root = new Ext.tree.AsyncTreeNode({
  id:'0',
  text: 'root',
});
tree.setRootNode(root);

页面基本上就这样,点击+号的时候会传id到指定的url,后台组装一下子节点对象数组就可以了,json或xml格式的

#5


当点击根节点时,会发送请求到get-nodes.php取得子节点数据,

然后希望点击子节点时, 会发送请求到get-nodes1.php页面取下一级子节点数据,
然实际上,它总是执行根节点的url,还是到get-nodes.php取数据

Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
width : 200,
height : 500,
autoScroll : true,
animate : true,
loader : {
dataUrl : 'get-nodes.php'
},
root : {
text : 'Ext JS'
}
});
});

get-nodes.php页面代码

[{
text : '2A folder Node',
dataUrl : 'get-nodes1.php'
}]

#6


这样就达到我的要求了

Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
width : 200,
height : 500,
autoScroll : true,
id : "test",
// useArrows: true,
animate : true,
loader : {
dataUrl : 'get-nodes.php',
baseParams : {
category : "category"
}
},
root : {
text : 'Ext JS'
}
});
});

// code in page get-nodes.php

[{
text : '2A folder Node',
listeners : {
beforeload : function(treeLoader) {
treeLoader.getLoader().baseParams = {
category : "changed"
};
}
}
}]

#7


这样就达到我的要求了

Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
width : 200,
height : 500,
autoScroll : true,
id : "test",
// useArrows: true,
animate : true,
loader : {
dataUrl : 'get-nodes.php',
baseParams : {
category : "category"
}
},
root : {
text : 'Ext JS'
}
});
});

// code in page get-nodes.php

[{
text : '2A folder Node',
listeners : {
beforeload : function(treeLoader) {
treeLoader.getLoader().baseParams = {
category : "changed"
};
}
}
}]

#8


很高兴楼主的问题已经解决

#9


遇到了同样地的问题...