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) {...}
}
}