Quelqu'un sait comment charger des données dans ExtJS TreeGrid à la demande?

J'ai trouvé un bon TreeGrid de contrôle dans la bibliothèque ExtJS. Mais il y a une chose, j'ai de très gros arbre et j'ai besoin de le chargement à la demande.

Quelqu'un sait comment charger des données dans ExtJS TreeGrid à la demande?

Mon code est ici:

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'
        }]        
    });
});
  • Post mise à jour de votre code avec le JSON que vous recevez de retour à partir du serveur
InformationsquelleAutor Sergey Shubin | 2010-08-31
  1. 0

    Qu'entendez-vous par sur le chargement de la demande? Je vois que vous utilisez asynchrone nœuds, qui seront automatiquement chargées à la demande chaque fois qu'un nœud est élargi.

    • Oui, j'utilise AsyncTreeNode nœud et j'ai attendu que le contrôle de charger des données à la demande. Quand je clique sur le nœud racine d'une requête est envoyée à un serveur et tous les nœuds enfants sont chargés, mais en cliquant sur tous les nœuds enfants (feuille=false) ne produit pas de demandes. Quel est le problème?
    InformationsquelleAutor Swar
  2. 0

    Je vois que vous êtes vous êtes à l'aide de l'Ext.d'arbre en arbre.AsynctreeNode et Ext.d'arbre en arbre.TreeLoader mais la TreeGrid aussi a ux classes pour TreeGridLoader et TreeGridNodeUI, etc.

    Regardez cet exemple avec Firebug Net de l'onglet et vous verrez tous les fichiers liés à l'utilisation de la TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

    InformationsquelleAutor SBUJOLD
  3. 0

    L'exemple de Sencha beau travail et charge les données sur la demande que vous le souhaitez.
    La question est de savoir si ou non il doit charger de nouvelles données.

    Donc, dans cet exemple, il n'est pas nécessaire, la cause n'importe quels paramètres que vous passez à la dataUrl il retournera toujours la totalité de l'arbre chargé.

    Mais si il y a un nœud de l'arbre, sans enfants, et vous n'avez pas explicitement dire que c'est une feuille, quand vous développez le nœud, il va faire un nouvel appel à la dataUrl avec l'id de nœud de paramètre.

    Vous êtes responsable pour le retour, le droit des données à partir de votre backend, à la fois dans la charge initiale de tous les nœuds parents et, à chaque fois, un nouveau nœud est élargi.

    Vous pouvez vérifier que cela fonctionne simplement de retirer tous les enfants à partir de n'importe quel nœud, vous verrez que lorsque le nœud est élargi, il va exécuter une requête Ajax pour les nouveaux nœuds (je pense que la méthode par défaut est POSTE).

    Un simple exemple de réglage de la méthode de requête et baseParams être transmis dans la demande, ainsi que l'id de nœud:

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

    Vous pouvez également ajouter des attributs de nœud comme params comme ceci:

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

    Juste au cas où quelqu'un se jette dans le présent par l'intermédiaire de google (comme je l'ai fait), la manière de résoudre ce problème est de faire ce qui suit:

    Si vos données ont un champ d'enfants, alors elle ne sera pas en mode asynchrone charge des enfants.

    Si vous souhaitez que le chargement asynchrone, vous devez supprimer les "enfants" de champ à partir de vos données.

    c'est à dire: Cela permettra de charger de manière asynchrone lorsque vous cliquez sur le dossier

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

    alors que ce ne sera pas charger de manière asynchrone:

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