Кто-нибудь знает, как загрузить данные в ExtJS TreeGrid по требованию?

Question

Я нашел хороший элемент управления TreeGrid в библиотеке ExtJS.Но есть одна вещь, у меня очень большое дерево, и мне нужна загрузка по требованию.

Кто-нибудь знает, как загружать данные в 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

На всякий случай, если кто-то столкнется с этим через Google (как я), способ решить эту проблему заключается в следующем:

Если ваши данные имеют дочернее поле, они не будут асинхронно загружать детей.

Если вы хотите асинхронную загрузку, вам нужно удалить поле 'children' из ваших данных.

т.е.

пока это не будет асинхронно загружаться:

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

Answer 2

Я вижу, что вы используете Ext.tree.AsynctreeNode и Ext.tree.TreeLoader, но TreeGrid также имеет классы ux для TreeGridLoader, TreeGridNodeUI и т. Д.

Посмотрите на этот пример на вкладке Net в Firebug, и вы увидите все связанные файлы для использования TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

Answer 3

Пример с Sencha работает нормально и загружает данные по запросу, как вы хотите. Вопрос в том, нужно ли загружать новые данные.
Так что в этом примере это не нужно, потому что независимо от того, какие параметры вы передаете dataUrl, он всегда будет возвращать полное загруженное дерево.
Но если в дереве есть узел без дочерних элементов и вы явно не говорите, что это лист, то при развертывании этого узла он совершит новый вызов dataUrl с параметром идентификатора узла .
Вы несете ответственность за возвращение правильных данных из своего бэкэнда как при начальной загрузке всех родительских узлов, так и при каждом расширении нового узла.
Вы можете проверить, работает ли он, просто удалив все дочерние элементы из любого узла, вы увидите, что когда этот узел будет расширен, он выполнит запрос Ajax для новых узлов (я думаю, что по умолчанию используется метод POST).
Простой пример настройки метода запроса и baseParams для передачи в запросе вместе с идентификатором узла:

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

Что вы подразумеваете под загрузкой по требованию? Я вижу, что вы используете асинхронные узлы, поэтому они будут автоматически загружаться по требованию при каждом расширении узла.