0

ExtJSライブラリで優れたTreeGridコントロールを見つけました。しかし、1つあります。私は非常に大きな木を持っており、オンデマンドでロードする必要があります。

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

4 に答える 4

0

オンデマンド ロードとはどういう意味ですか? 非同期ノードを使用していることがわかります。そのため、ノードが展開されるたびにオンデマンドで自動的にロードされます。

于 2010-08-31T17:53:34.527 に答える
0

誰かがグーグル経由でこれに出くわした場合に備えて（私がしたように）、これを解決する方法は次のことです：

データに 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
}]
于 2014-01-20T01:22:09.333 に答える
0

Ext.tree.AsynctreeNode と Ext.tree.TreeLoader を使用しているようですが、TreeGrid には TreeGridLoader と TreeGridNodeUI などの ux クラスもあります。

この例を Firebug の Net タブで見ると、TreeGrid を使用するためのすべての関連ファイルが表示されますhttp://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

于 2010-08-31T19:42:51.430 に答える
0

Sencha の例は問題なく動作し、必要に応じてオンデマンドでデータをロードします。問題は、新しいデータをロードする必要があるかどうかです。
そのため、その例では必要ありません。dataUrl に渡すパラメータに関係なく、ロードされた完全なツリーが常に返されるためです。
ただし、ツリーに子のないノードがあり、それがリーフであると明示的に言わない場合、そのノードを展開すると、ノード id パラメータを使用して 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);
于 2010-09-17T11:10:51.677 に答える