Как мне показать вложенные данные в дереве?

Question

Дальнейший прогресс. Пожалуйста, смотрите на http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel

Я всегда ценю любые дальнейшие советы.

---

Я пытаюсь разработать простой сценарий extJS Ext 4.0.2a для отображения некоторых вложенных данных в виде дерева перетаскивания. Чтобы попробовать, я использую простой пример из http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader

Данные приведены в виде файла users.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"
                        }
                    }
                ]
            }
        ]
    }
]
}

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

Из того же документа я учусь определять свои модели (я считаю):

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

далее я определяю хранилище дерева и панель дерева (для некоторых выбранных полей):

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

Я вижу панель, root и пользователей первого уровня (как подузлы root). Я не вижу никаких подузлов (orders, order_items и т. Д.).

Я внимательно посмотрел ряд постов, довольно много улучшил, но все еще не нашел рабочего решения.

Answer 1

Я столкнулся с той же задачей, и сначала был рад столкнуться с вашим постом!После 5 часов изучения официальных документов по этому вопросу:

• http://docs.sencha.com/ext-js/4-0/#!/guide/data
• http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader

Я смог заполнить свое вложенное хранилище деревьевс ничем не лучше этого:

(в моем случае основной моделью является Camgroup, в которой в качестве «камеры» выбрано множество камер: что позволяет использовать .cams () для каждой группы)

Ext.define('AV.store.sCamgroups', {
    extend: 'Ext.data.TreeStore',
    model: 'AV.model.Camgroup',
    autoLoad: true,
    root: {
        expanded: true,
        text: "Grouped Cameras"
    },
    proxy: {
        type: 'ajax',
        url: 'data/camgroups.json',
        reader: {
            type: 'json',
            root: 'camgroups',
            successProperty: 'success'
        }
    },
    listeners: {
        load: function(thisStore, rootnode, records, successful, eOpts){
            records.forEach(function(group){
                group.cams().each(function(cam) {
                    group.appendChild({
                        text: cam.get('name'),
                        leaf: true
                    });
                });
            });
        }
    }
});

camgroups.json возвращает что-то вроде этого:

{
    success: true,
    camgroups: [{
        "id"    : "group1",
        "name"  : "Exterior cams",
        "cams"  : [{
            "id"    : "cam3",
            "name"  : "Camera three",
            "url"   : "...",
            "img"   : "images/cams/3.png",
            "ratio" : 1.33
        },{
            "id"    : "cam4",
            "name"  : "Camera four",
            "url"   : "...",
            "img"   : "images/cams/4.png",
            "ratio" : 1.33
        }]
    }]
}

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

Опять же, в "Ext.data".reader.Reader "Я вижу, что Reader имеет свойство config 'implicitInclude', которое должно 'автоматически анализировать модели, вложенные в другие модели, в объект ответа', но я не могу заставить его работать = (

Cheers,Илья

Answer 2

Дальнейший прогресс. Пожалуйста, смотрите на http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel

Я ценю любые дальнейшие советы.

---

Я добился определенного прогресса. Кажется, мне нужно изменить свой JSON:

{
"children": [      <<<<---- use the same string to insert nested data, see below too
    {
        "id": 12,
        "name": "Ed2",
    "children": []   <<<<---- need this line, otherwise, JS tries to load subnodes for ever
},
    {
        "id": 123,
        "name": "Ed",
        "children": [    <<<<---- as above
            {
                "id": 50,
                "total": 100,
                "info" : "hello",
        "name" : "ciao",
                "children": [         <<<<---- as above
                    {
                        "id"      : 20,
                        "price"   : 40,
                        "quantity": 2,
                        "children" : {         <<<<---- as above
                            "id": 1000,
                            "name": "MacBook Pro",
            "children": []        <<<<---- as above bis
                        }
                    },
                    {
                        "id"      : 21,
                        "price"   : 20,
                        "quantity": 3,
                        "children" : {   <<<<---- as above
                            "id": 1001,
                            "name": "iPhone",
            "children": []     <<<<---- as above bis
                        }
                    }
                ]
            }
        ]
    }
]

}

Тогда работает следующее определение модели:

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

proxy: {
    type: 'ajax',  //rest
    url : 'ex1.json',
    reader: {
        type: 'json',
        root: 'children'
    }
}

});

Итак, похоже, что ассоциации между моделями для разных уровней моих вложенных данных вообще не нужны.

Это работает, хотя я не уверен, есть ли недостатки или нет. Я все еще ищу ваш совет, я иду методом проб и ошибок, я еще не вижу основную логику. Thks.

---

У меня вторые мысли . Трюк с использованием уникальной строки 'children' не кажется таким уж хорошим. Позвольте мне рассмотреть очень простой JSON:

{
"users": [
    {
        "id": 12,
        "name": "Ed2",
    "orders": []
},
    {
        "id": 123,
        "name": "Ed",
        "orders": [
            {
                "id": 50,
                "info" : "hello",
        "name" : "MM",
                "leaf" : 'true',
                "some_else": []    
               }]
     }
        ]

}

Дерево extJS, которое я хочу получить:

Root
|--ED
|--ED2 
   |--MM

Модель просто

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

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

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

Ext.define("Order", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name', 'info' 
    ],
    belongsTo: 'User'
});

Окончательный результат, который я получаю:

Root
|--ED
|--ED2 

это моя ошибка или отсутствующая функция? Есть ли выход без изменения моего JSON?

Большое спасибо