extjs 3.31 TreeGrid實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面
更新時間：2013年04月02日 14:53:07 作者：
extjs 3.31 TreeGrid 我的小改動，實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面
想要實現(xiàn) TreeGrid的效果，打開官方例子卻看不到效果，怎么辦呢？我是這樣實現(xiàn)的
var root = new Ext.tree.TreeNode({
text: '根節(jié)點',
expanded: true
});
tree.setRootNode(root);
var nodes = {};
nodes.children = mydata;/*TreeGrid的json數(shù)據(jù)[{……},{……}]*/
function appendChild(node, o) {
if (o.children != null && o.children.length > 0) {
for (var a = 0; a < o.children.length; a++) {
var n = new Ext.tree.TreeNode({
task:o.children[a].task,
duration:o.children[a].duration,
user:o.children[a].user,
iconCls:o.children[a].iconCls
});
node.appendChild(n);
appendChild(n, o.children[a]);
}
}
}
appendChild(root, nodes);
看源碼我們知道 TreeGrid 繼承于 TreePanel
所以 root 才是數(shù)據(jù)源而不是 store,
根據(jù)加載json數(shù)據(jù)到樹的原理，同理我們可以這樣加載json數(shù)據(jù)到 treeGrid,而不再為dataUrl: 'treegrid-data.json'這樣的加載方式而煩惱了，是不是很簡單呢？
復(fù)制代碼 代碼如下:
var root = new Ext.tree.TreeNode({
text: '根節(jié)點',
expanded: true
});
tree.setRootNode(root);
var nodes = {};
nodes.children = mydata;/*TreeGrid的json數(shù)據(jù)[{……},{……}]*/
function appendChild(node, o) {
if (o.children != null && o.children.length > 0) {
for (var a = 0; a < o.children.length; a++) {
var n = new Ext.tree.TreeNode({
task:o.children[a].task,
duration:o.children[a].duration,
user:o.children[a].user,
iconCls:o.children[a].iconCls
});
node.appendChild(n);
appendChild(n, o.children[a]);
}
}
}
appendChild(root, nodes);
看源碼我們知道 TreeGrid 繼承于 TreePanel
所以 root 才是數(shù)據(jù)源而不是 store,
根據(jù)加載json數(shù)據(jù)到樹的原理，同理我們可以這樣加載json數(shù)據(jù)到 treeGrid,而不再為dataUrl: 'treegrid-data.json'這樣的加載方式而煩惱了，是不是很簡單呢？
您可能感興趣的文章:
- Javascript獲取HTML靜態(tài)頁面參數(shù)傳遞值示例
- JS+JSP通過img標(biāo)簽調(diào)用實現(xiàn)靜態(tài)頁面訪問次數(shù)統(tǒng)計的方法
- jsp實現(xiàn)將動態(tài)網(wǎng)頁轉(zhuǎn)換成靜態(tài)頁面的方法
- js+php實現(xiàn)靜態(tài)頁面實時調(diào)用用戶登陸狀態(tài)的方法
- PHP采集靜態(tài)頁面并把頁面css,img,js保存的方法
- javascript靜態(tài)頁面?zhèn)髦档娜N方法分享
- javascript實現(xiàn)html頁面之間參數(shù)傳遞的四種方法實例分析
- JSP頁面中超鏈接傳遞中文參數(shù)出現(xiàn)亂碼問題解決方法
- JavaScript函數(shù)的調(diào)用以及參數(shù)傳遞
- 四種參數(shù)傳遞的形式——URL，超鏈接，js，form表單
- jsp中URL傳遞中文參數(shù)的處理方法
- javascript自定義函數(shù)參數(shù)傳遞為字符串格式
- 關(guān)于javaScript注冊click事件傳遞參數(shù)的不成功問題
- JS控制靜態(tài)頁面?zhèn)鬟f參數(shù)并獲取參數(shù)應(yīng)用
相關(guān)文章
Extjs Ext.MessageBox.confirm 確認對話框詳解
顯示一個確認對話框，用來代替JavaScript標(biāo)準(zhǔn)的confirm()方法，具有兩個按鈕“是”和“否”如果為其提供一個回調(diào)函數(shù)，則該函數(shù)將在單擊按鈕后被調(diào)用(包括右上角的推出按鈕)，所單擊按鈕的id將被作為唯一的參數(shù)傳遞到回調(diào)函數(shù)中。2010-04-04
Extjs ajax同步請求時post方式參數(shù)發(fā)送方式
一般參數(shù)傳遞通過url后面跟后臺也能取到，不過看到send參數(shù)也可以發(fā)送參數(shù)，試驗了一下服務(wù)器端接受不到發(fā)送的參數(shù)，在firebug里看到發(fā)送的請求post部分是一個串，不太象正常發(fā)送的參數(shù)。2009-08-08
Exitjs DataView中圖片文件名獲取實現(xiàn)代碼。2009-11-11
extjs 學(xué)習(xí)筆記（三） 最基本的grid
extjs的一個亮點就是提供了豐富的UI，使得沒有藝術(shù)細胞的程序員也能做出絢麗的界面。把所有的UI集中到一起，有好處也有壞處，好處是有了統(tǒng)一的風(fēng)格和接口，壞處是js文件過于龐大，使用extjs的最小集合也超過了500k，所以在有些項目中并不適用。2009-10-10
extjs關(guān)于treePanel+chekBox全部選中以及清空選中問題探討
treePanel+chekBox全部選中以及清空選中，想必大家在學(xué)習(xí)使用過程中都見過這種效果吧，接下來為大家詳細介紹下實現(xiàn)過程及細節(jié)，感興趣的朋友可以參考下哈2013-04-04
Extjs4 消息框去掉關(guān)閉按鈕(類似Ext.Msg.alert)
類似Ext.Msg.alert();但沒有關(guān)閉按鈕,由于Extjs4消息框中的關(guān)閉按鈕，沒有執(zhí)行回調(diào)函數(shù)，點擊關(guān)閉按鈕后，直接關(guān)閉窗口，接下來為大家詳細介紹下去掉關(guān)閉按鈕2013-04-04
代碼看起來簡潔又漂亮是如何做到的，這篇文章主要為大家詳細介紹了Extjs如何讓combobox寫起來更簡單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
extjs 的權(quán)限問題 要求控制的對象是 菜單，按鈕，URL
這兩天在解決extjs 的權(quán)限問題。要求控制的對象是 菜單，按鈕，URL2010-03-03
Extjs改變樹節(jié)點的勾選狀態(tài)點擊按鈕將復(fù)選框去掉
需要一個功能點擊一個按鈕后將樹節(jié)點前的復(fù)選框去掉，變成沒有選擇的狀態(tài)，百度一下發(fā)現(xiàn)個不錯的方法，需要的朋友可以參考下2013-11-11
ExtJS4的requires是新增的機制，主要是實現(xiàn)異步加載機制，在下面的文章總將為大家介紹下ExtJS4中的requires使用方法，需要的朋友不要錯過2013-12-12