extjstree异步加载

① extjs里的treepanel的用法

TreePanel继承自Panel，在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点，比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍几个extjs中treepanel例子：

一、TreePanel基本配置参数:

			
//TreePanel配置参数

animate:true//展开,收缩动画,false时,则没有动画效果

autoHeight:true//自动高度,默认为false

enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable

enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)

enableDrop:true//仅仅drop

lines:true//节点间的虚线条

loader:Ext.tree.TreeLoader//加载节点数据

root:Ext.tree.TreeNode//根节点

rootVisible:false//false不显示根节点,默认为true

trackMouseOver:false//false则mouseover无效果

useArrows:true//小箭头
	

二、TreeNode的基本配置参数:

			
//TreeNode常用配置参数

checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框

expanded:fasle//展开,默认不展开

href:"http:/www.cnblogs.com"//节点的链接地址

hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开

leaf:true//叶子节点,看情况设置

qtip:"提示"//提示信息,不过要Ext.QuickTips.init();下

text:"节点文本"//节点文本

singleClickExpand:true//用单击文本展开,默认为双击

三、treepanel实例：

第一个静态树--最简单的树：

Ext.onReady(function(){

varmytree=newExt.tree.TreePanel({

el:"container",//应用到的html元素id

animate:true,//以动画形式伸展,收缩子节点

title:"Extjs静态树",

collapsible:true,

rootVisible:true,//是否显示根节点

autoScroll:true,

autoHeight:true,

width:150,

lines:true,//节点之间连接的横竖线

loader:newExt.tree.TreeLoader(),//

root:newExt.tree.AsyncTreeNode({

id:"root",

text:"根节点",//节点名称

expanded:true,//展开

leaf:false,//是否为叶子节点

children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]

})

});

mytree.render();//不要忘记render()下,不然不显示哦

})
	

效果图:

② extjs动态异步树无法获取子节点

function createTree() {
// 树根
var root = new Ext.tree.AsyncTreeNode({
text : "后台系统"
});

// 获取远程数据
var data = new Ext.tree.TreeLoader({
url : "禅巧ma.do?operate=doLoad"
});

// 树面板
var tp = new Ext.tree.TreePanel({
x : 10,
y : 50,
height : 400,
width : 235,
root : root,
loader : data,
renderTo : "贺携键show"
});
}
function assignModel(rId) {
// 树根
var root = new Ext.tree.AsyncTreeNode({
text : "后台系隐铅统"
});

// 获取远程数据
var data = new Ext.tree.TreeLoader({
url : "ma.do?operate=doAssignPopedom"
});

// 树面板
var tp=new Ext.tree.TreePanel({
height : 400,
width : 235,
root:root,
loader:data
});
var win = new Ext.Window({
height : 400,
width : 235,
items : tp,
buttons:[{
text:"分配权限",
handler:function(){
var ca=tp.getChecked(); //选取的模块
var aa=new Array();
for(var i=0;i<ca.length;i++){
//alert(ca[i].id);
aa[i]=ca[i].id;
}
//alert(rId);
r.assignPopedom(rId,aa,process);
}
}]
});
win.show();
}
你的问题不大明白，这是我写的系统中用的一个树，希望对你有帮助，其中rId是权限ID。

③ 怎样判断ExtJS 异步tree的某个节点下的所有节点都已经加载了

最近在项目中遇到一个Ext
异步树头痛的问题：树中的每个节点都有一个checkbox，当勾选父节点时，也需要将其所有的子节点都选中，但是问题是当前还没有加载这些子节点。知道可以通过对父节点加tree.on(checkedchange,function(node){node.expand(..递归.)});的形式逐个展开所有的子节点，但是怎样才能知道父节点下的所有子节点都被展开选中了呢？
因为要在这之后对该父节点和其所有子节点做一些操作。
tree.on('checkedchange',function(node,checked){
node.attributes.checked
=
checked;
node.expand(true,true,function(){
node.eachChild(function(child){
child.getUI.checked
=
checked;
child.attributes.checked
=
checked;
child.toggle();
child.fireEvent('checkedchange',child,checked,tree);});node.collapse();});
},tree);
这样递归的展开所有的子节点，但是还是不能具体的返回标志说已经展开完毕所有节点，我想利用这个标志判断是否已经加载完毕，能否说的更详细点。问题补充：clue
写道给你扩展的deepExpand不是有个回调参数吗？如果全部展开完毕就会调用这个回调
换句话说，回调被调用时，该节点的所有子节点一定被全部展开完成
不好意思大拿，问下，您的这个this.childNodes只是父节点下的直接子节点，如果子节点下还有子节点这种多层嵌套节点的情况，这种回调传参就不能确定到最底层的节点是否有被展开，而只能确定父节点的直接子节点有被全部展开或每展开一层节点完毕就调用了这个回调。
，for循环中调用的是自身：deepExpand
刚才把这段代码放到Ext.onReady的开始，然后在后面用一个父节点subRoot.deepExpand(false,function(){alert('expanded
all!');},this);
，但是当节点被正常全部展开之后，没有打印'expanded
all!'问题补充：clue
写道可能是没考虑叶子节点的情况
加上一句吧：
if(len<=0){
taskDone();return;}//
递归展开
for(var
i
=
0,
len
=
cs.length;
i
<
len;
i++)
{
cs[i].deepExpand(anim,
taskDone,
this);}
刚才用FireBug调试后发现：这段代码是将父节点的子节点一层展开完后，再去展开子节点的子节点，这样当一层展开完之后便会去调用那个回调，这样会造成每展开完一层就要回调这个callback，没有达到所有节点展开完毕再回调的效果，并且firebug还报this.runCallback(callback,scope
||
this,[this])中的callback未定义，但是我用传了一个用是这样写的：
subRoot.deepExpand(false,function(){
if(len<=0){
taskDone();
//
<---
这里？
应该修改为
taskDone.call(this);return;}//
递归展开
for(var
i
=
0,
len
=
cs.length;
i
<
len;
i++)
{
逻辑是没问题，每展开一个子节点，都会调用taskDone回调。taskDone中有判断当前完成了多少个节点，如果根据计数判断都完成的就调用最终回调。

④ ExtJs4 中如何让TreePanel的节点可拖动

加个插件就可以了
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
rootVisible: false,
renderTo: Ext.getBody()
});

⑤ Extjs中如何动态加载'Ext.tree.Panel'树当中的各个节点

去查一下api，在store里面有个beforeload的方法，即在加载数据之前把参数穿进去，筛选回出符合权限的数据即可

listeners : {
'beforeload' : function(store, operation, eOpts) {
// do something....
答 });
},
load:function(store, records, successful, eOpts ){
}
},

⑥ 求教，extjs-4.0.0中treegrid官网中的例子不加载数据，如何改进

你可以了解一下念肆同步树和异步树，静态数据加载是同步的，一次性全加载进来了，如果真要答并查询结束才加载的话，可以到时才设置url,然后load方法就可仔举轿以了。

⑦ Extjs 同步树treepanel，如何提高加载速度只加载根节点数据，展开节点后再加载节点下数据。

extjs的树形结构本身就会很慢，3000个节点也绝对是致命的，如果一起加载很可能会版出现页面请求超时，所权以我们的项目中用到这种比较大的树一般不会选择用extjs本身的树形结构，一般会选用比较轻量级的框架，比如zTree，他能跟extjs很好的结合，有能力可以改改css，这样跟extjs的主题会更加和谐，zTree使用简单，速度不只是extjs treepanel的几倍，可异步加载，也可直接加载，个添加各种事件，你值得拥有

⑧ 关于ExtJs TreeLoad的问题

var treeLoader = new Ext.tree.TreeLoader({
baseAttrs : {
uiProvider : Ext.ux.ColumnTreeCheckNodeUI
},
url : 'myAction_getTreeItems.action',
timeout:30000, /伏启/塌尺这里吗？团厅高
listeners : {
loadexception : function(treeLoader, node, response) {...}
}
}