有沒有人知道如何在ExtJS TreeGrid中按需加載數據？

我在ExtJS庫中找到了一個很好的TreeGrid控件。但有一件事，我有非常大的樹，我需要按需加載。有沒有人知道如何在ExtJS TreeGrid中按需加載數據？

我的代碼是在這裏：

Ext.onReady(function() { 
    Ext.QuickTips.init(); 

    var tree = new Ext.ux.tree.TreeGrid({ 
     title: 'Encyclopedia', 
     width: 400, 
     height: 500, 
     animate: true, 
     autoScroll: true, 
     renderTo: "EncyclopediaTree", 
     containerScroll: false, 
     border: false, 
     enableDD: false, 
     root : new Ext.tree.AsyncTreeNode({text: 'Root'}), 
     loader: new Ext.tree.TreeLoader({ dataUrl: '/AdminEx/GetEncyclopediaTree' }),   

     columns: [{ 
      header: 'Item', 
      dataIndex: 'item', 
      width: 230 
     }, { 
      header: 'Type', 
      width: 150, 
      dataIndex: 'type' 
     }]   
    }); 
});

來源

2010-08-31 Sergey Shubin

後用JSON一起更新的代碼，你從服務器接收回：這將異步當你在文件夾上單擊

[{ "ShopTree": { "id": "ShopCategory1", "name": "Large Items" }, "leaf": false }, { "ShopTree": { "id": "ShopCategory5", "name": "Accessories" }, "leaf": false }]

雖然這不會異步加載加載 – SBUJOLD 2010-09-01 13:00:23

你怎麼按需加載的意思？我可以看到你正在使用異步節點，所以只要節點擴展，就會自動按需加載。

來源

2010-08-31 17:53:34 Swar

是的，我使用AsyncTreeNode節點，我期望控件將按需加載數據。當我點擊根節點時，會向服務器發送請求，並加載所有子節點，但單擊任何子節點（leaf = false）不會產生任何請求。有什麼不對？ – 2010-08-31 18:19:08

我看到你正在使用的Ext.tree.AsynctreeNode和Ext.tree.TreeLoader，但也的TreeGrid已經UX類TreeGridLoader和TreeGridNodeUI等

看看下面這個例子用Firebug的Net選項卡你會看到所有相關的文件使用TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

來源

2010-08-31 19:42:51 SBUJOLD

我用這個例子（http：//dev.sencha。com/deploy/dev/examples/treegrid/treegrid.html）來構建我的TreeGrid。我創建了TreeGridLoader，但它仍然不起作用。任何人都可以從Sencha網站（http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html）修改標準示例以獲得異步加載（按需加載）？ – 2010-09-01 07:43:01

我發現TreeGrid的一個例子是http://www.sencha.com/examples/explorer.html#asynctreegrid，但它是extjs.gxt，我不明白如何從那裏獲得一個清晰的JavaScript代碼。 – 2010-09-01 08:15:34

從Sencha的例子工作正常，按需加載數據，如你所願。問題是它是否需要加載新數據。
所以在那個例子中，它不需要，不管你傳遞給dataUrl的參數是什麼，它總是會返回裝滿的樹。
但是，如果沒有子節點的樹中有一個節點，並且沒有明確說它是樹葉，那麼當您展開該節點時，它將重新調用dataUrl with the node id parameter。
您有責任從後端返回正確的數據，無論是在所有父節點的初始加載中，還是每次擴展新節點時。
您可以檢查它是否正在工作，只需從任何節點中刪除所有子節點，您將看到當該節點被展開時，它將執行新節點的Ajax請求（我認爲默認方法是POST）。
一個簡單的例子設置請求方法和baseParams在請求中傳遞與節點ID一起：

var tree = new Ext.ux.tree.TreeGrid({ 
    renderTo: "outputDiv", 

    loader: new Ext.ux.tree.TreeGridLoader({ 
     dataUrl: "general-data", 
     requestMethod: "GET", 
     baseParams: { 
      fromDate: "2010-01-01", 
      toDate: "2010-01-01", 
      dateField: "systemDate" 
     } 
    }), 

    columns:[{ 
     header: "Customer", 
     dataIndex: "customer" 
    },{ 
     header: "Order", 
     dataIndex: "orderNumber" 
    },{ 
     header: "Order Line", 
     dataIndex: "orderLine" 
    },{ 
     header: "Item", 
     dataIndex: "itemNumber" 
    }] 
});

您還可以添加節點屬性作爲PARAMS這樣的：

tree.getLoader.on("beforeload", function(treeLoader, node) { 
    this.baseParams.customer = node.attributes.customer; 
}, this);

來源

2010-09-17 11:10:51 Triqui

以防萬一有人遇到這個通過谷歌（像我這樣做），解決這個問題的方法是做到以下幾點：

如果你的數據有一個子字段，那麼它不會異步加載子。

如果你想異步加載，你需要從數據中刪除'children'字段。

即：

[{ 
    "ShopTree": { 
     "id": "ShopCategory1", 
     "name": "Large Items" 
    }, 
    "children": [], 
    "leaf": false 
}, { 
    "ShopTree": { 
     "id": "ShopCategory5", 
     "name": "Accessories" 
    }, 
    "children": [], 
    "leaf": false 
}]

來源

2014-01-20 01:22:09

有沒有人知道如何在ExtJS TreeGrid中按需加載數據？

回答

相關問題