Comment puis-je afficher les données imbriquées dans un arbre?

De nouveaux progrès. Veuillez voir à http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel

J'ai toujours apprécié de tout autre conseiller.

Je suis en train de développer un simple extJS Ext 4.0.2 un script pour afficher certaines données imbriquées comme un Drag&Drop arbre.
Pour essayer, j'utilise un simple exemple de http://docs.sencha.com/ext-js/4-0/#!/api/Ext.les données.reader.Lecteur

Données sont donnés à titre d'utilisateurs.fichier json:

{
"users": [
    {
        "id": 123,
        "name": "Ed",
        "orders": [
            {
                "id": 50,
                "total": 100,
                "order_items": [
                    {
                        "id"      : 20,
                        "price"   : 40,
                        "quantity": 2,
                        "product" : {
                            "id": 1000,
                            "name": "MacBook Pro"
                        }
                    },
                    {
                        "id"      : 21,
                        "price"   : 20,
                        "quantity": 3,
                        "product" : {
                            "id": 1001,
                            "name": "iPhone"
                        }
                    }
                ]
            }
        ]
    }
]
}

Je souhaite afficher des données comme un arbre, dont le premier niveau des nœuds sont les utilisateurs de second niveau des nœuds sont des ordres, et ainsi de suite.

De la même doc, j'apprends comment définir mes modèles (je crois):

    Ext.define("User", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: {model: 'Order', name: 'orders'},

    proxy: {
        type: 'ajax', //rest
        url : 'users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
})

;

Ext.define("Order", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'total'
    ],

    hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
    belongsTo: 'User'
});

Ext.define("OrderItem", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'price', 'quantity', 'order_id', 'product_id'
    ],

    belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});

Ext.define("Product", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: 'OrderItem'
});

ensuite, je définis un arbre de stocker et d'une arborescence (pour certains champs sélectionnés):

    var store = Ext.create('Ext.data.TreeStore', {
model: 'User',
autoLoad: true,
autoSync: true,
root: {
name: "Root node",
id: '0',
expanded: true
}, 
sorters: [{
property: 'id',
direction: 'ASC' //DESC
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,  
displayField: 'name', //what nodes display (default->text)
columns: [{
xtype: 'treecolumn',
text: 'name',
dataIndex: 'name',
width: 150,
sortable: true
}, {
text: 'total',
dataIndex: 'total',
width: 150,
flex: 1,
sortable: true
}, {
text: 'price',
dataIndex: 'price',
width: 50,
flex: 1,
sortable: true
},{ 
text: 'quantity',
dataIndex: 'quantity',
width: 150,
flex: 1
}, {
text: 'id',
dataIndex: 'id',
flex: 1,
width: 15,
sortable: true
}],
collapsible: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',  //see Ext.tree.plugin.TreeViewDragDrop
nodeHighlightColor : '7B68EE',
nodeHighlightOnDrop : true, 
nodeHighlightOnRepair: true, 
enableDrag: true, 
enableDrop: true
}
},
renderTo: 'tree-div',
height: 300,
width: 900,
title: 'Items',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
});

Je vois le panneau, la racine et le premier niveau des utilisateurs (comme des sous-nœuds de la racine). Je ne vois pas de sous-nœuds (commandes, order_items et ainsi de suite).

J'ai regardé attentivement un certain nombre de postes, l'amélioration des choses pas mal, mais manque encore d'obtenir une solution de travail.

OriginalL'auteur mario | 2011-10-03