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

Я нашел хороший элемент управления 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'
        }]        
    });
});

extjs treegrid
person Sergey Shubin    schedule 31.08.2010    source источник
comment
Опубликуйте свой обновленный код вместе с JSON, который вы получите обратно с сервера.   -  person SBUJOLD    schedule 01.09.2010

Ответы (4)


arrow_upward
0
arrow_downward

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

person Swar    schedule 31.08.2010
comment
Да, я использую узел AsyncTreeNode и ожидал, что элемент управления будет загружать данные по требованию. Когда я нажимаю на корневой узел, запрос отправляется на сервер, и все дочерние узлы загружаются, но нажатие на любые дочерние узлы (leaf=false) не создает никаких запросов. Что не так? - person Sergey Shubin; 31.08.2010

arrow_upward
0
arrow_downward

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

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

person SBUJOLD    schedule 31.08.2010
comment
Я использовал этот пример (dev.sencha.com/deploy/dev/examples /treegrid/treegrid.html), чтобы построить свой TreeGrid. Я создал TreeGridLoader, но он все еще не работает. Может ли кто-нибудь изменить стандартный пример с сайта Sencha(dev.sencha.com/deploy /dev/examples/treegrid/treegrid.html), чтобы получить асинхронную загрузку (загрузку по запросу)? - person Sergey Shubin; 01.09.2010
comment
Я нашел один пример с TreeGrid здесь sencha.com/examples/explorer.html#asynctreegrid , но это extjs.gxt и я не понимаю, как оттуда получить понятный код javascript. - person Sergey Shubin; 01.09.2010

arrow_upward
0
arrow_downward

Пример от 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);
person Triqui    schedule 17.09.2010

arrow_upward
0
arrow_downward

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

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

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

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

[{
    "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
}]
person Ben Hitchcock    schedule 20.01.2014