有人知道如何按需加载 ExtJS TreeGrid 中的数据吗？

Question

我在 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'
        }]        
    });
});

Answer 1

按需加载是什么意思？我可以看到您正在使用异步节点，因此只要扩展节点，就会自动按需加载。

Answer 2

我发现您正在使用 Ext.tree.AsynctreeNode 和 Ext.tree.TreeLoader 但 TreeGrid 也有 TreeGridLoader 和 TreeGridNodeUI 等的 ux 类。

使用 Firebug 的 Net 选项卡查看此示例，您将看到所有相关文件使用 TreeGrid http://dev.sencha.com/deploy/ dev/examples/treegrid/treegrid.html

Answer 3

Sencha 的示例运行良好，可以根据需要按需加载数据。
问题是是否需要加载新数据。
因此，在该示例中，它不需要这样做，因为无论您传递给 dataUrl 的参数是什么，它总是返回加载的完整树。
但是，如果树中有一个没有子节点的节点，并且您没有明确表示它是叶子，那么当您展开该节点时，它将对 带有节点 id 参数的 dataUrl。
您有责任从后端返回正确的数据，无论是在所有父节点的初始加载中还是在每次扩展新节点时。
您可以检查它是否正常工作，只需从任何节点中删除所有子节点，您将看到当该节点展开时，它将对新节点执行 Ajax 请求（我认为默认方法是 POST）。
一个简单的示例，设置请求方法和与节点 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);

Answer 4

以防万一有人通过谷歌遇到这个问题（就像我一样），解决这个问题的方法是执行以下操作：

如果您的数据有子字段，那么它不会异步加载子字段。

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

即：当您单击文件夹时，这将异步加载

[{
    "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
}]