有人知道如何按需加载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'
        }]        
    });
});

---

你所说的按需加载是什么意思？我可以看到您使用的是异步节点，因此每当节点展开时，将根据需要自动加载这些节点。

我可以看到您使用的是Ext.tree.AsynctreeNode和Ext.tree.TreeLoader，但是TreeGrid也有用于TreeGridLoader和TreeGridNodeUI等的ux类

---

使用Firebug的Net选项卡查看此示例，您将看到使用TreeGrid的所有相关文件。Sencha中的示例工作正常，并根据需要加载数据。 问题是它是否需要加载新数据。
因此，在该示例中，它不需要这样做，因为无论您向dataUrl传递什么参数，它都会返回加载的完整树。
但是，如果树中有一个节点没有子节点，并且您没有明确地说它是一个叶，那么当您展开该节点时，它将对进行新调用。
您有责任从后端返回正确的数据，无论是在所有父节点的初始加载中还是每次新节点展开时。
您可以简单地从任何节点删除所有子节点来检查它是否正常工作，您将看到当该节点展开时，它将对新节点执行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"
    }]
});

还可以将节点属性添加为参数，如下所示：

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

---

万一有人通过谷歌（像我一样）遇到这个问题，解决这个问题的方法是：

如果数据有子字段，则不会异步加载子字段

如果希望异步加载，则需要从数据中删除“children”字段

ie：当你点击文件夹时，这将异步加载

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

虽然这不会异步加载：

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

---

是的，我使用AsyncTreeNode节点，我希望控件将按需加载数据。当我点击根节点时，一个请求被发送到服务器，所有子节点都被加载，但是点击任何子节点（leaf=false）都不会产生任何请求。怎么了？我用这个例子（）构建了我的TreeGrid。我已经创建了TreeGridler，但它仍然不起作用。有人能修改Sencha site（）的标准示例以获得异步加载（按需加载）吗？我在这里找到了一个使用TreeGrid的示例，但它是extjs.gxt，我不知道如何从那里获得清晰的javascript代码。将更新后的代码与从服务器收到的JSON一起发布