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的参数是什么，它都将始终返回已加载的完整树。但是如果树中有一个没有子节点的节点，并且您没有明确说它是一个叶子，那么当您展开该节点时，它将对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"
    }]
});

您还可以将节点属性添加为这样的参数：

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

Answer 4

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

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

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

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
}]

有人知道如何根据需要在ExtJS TreeGrid中加载数据吗？

4 个答案: