Сетка ExtJS 4: отображение вложенных моделей данных с ассоциациями - PullRequest
Новая
       5

Сетка ExtJS 4: отображение вложенных моделей данных с ассоциациями

4 голосов
/ 20 августа 2011

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

{
        "success" : "true",
        "total":2,
        "user" : 
        {
            "id" : 12,
            "email" : "abc@gmail.com",          
            "course" : 
            {
                "name" : "BESE",        
                "institute" : 
                [{
                    "name" : "Engineering University",
                    "semester" :
                    {
                        "number":1,
                        "TCH" : 12,
                        "GPA" : 2.32,
                        "Marks":23.32,
                        "record" : [
                            {
                                "subject" : "Global Studies",
                                "CH":2,
                                "GP":4,
                                "Grade": "A+",
                                "Marks":99.1
                            },
                            {
                                "subject" : "Digital Logic Design",
                                "CH":4,
                                "GP":3.5,
                                "Grade": "B+",
                                "Marks":79.1
                            }
                        ]
                    }
                },
                {
                    "name" : "Another University",
                    "semester" :
                    {
                        "number":2,
                        "TCH" : 22,
                        "GPA" : 1.32,
                        "Marks":13.32,
                        "record" : [
                            {
                                "subject" : "C++",
                                "CH":2,
                                "GP":3,
                                "Grade": "C+",
                                "Marks":59.1
                            },
                            {
                                "subject" : "Engg Math",
                                "CH":4,
                                "GP":2.5,
                                "Grade": "C",
                                "Marks":39.1
                            }
                        ]
                    }
                }]
            }
        }
    }

и это мой код ...... 

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',         type: 'int'},
        {name: 'email',      type: 'string'},
    ],
    proxy: {
        type: 'ajax',
        url : 'getRecord.php',
        reader: {
            type: 'json',
            root: 'user'
        }
    },
    hasMany: { model: 'Course', name: 'course' ,associationKey: 'course'}

});

Ext.define('Course', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',         type: 'int'},

        {name: 'name',      type: 'string'},
    ],

    belongsTo: 'User',
    hasMany: { model: 'Institute', name: 'institute' ,associationKey: 'institute'}

});

Ext.define('Institute', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',         type: 'int'},

        {name: 'name',      type: 'string'},
    ],

    belongsTo: 'Course',
    hasMany: { model: 'Semester', name: 'semester',associationKey: 'semester' }

});

Ext.define('Semester', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'number',     type: 'int'},
        {name: 'TCH',        type: 'float'},
        {name: 'GPA',        type: 'float'},                
        {name: 'Marks',      type: 'float'},
    ],

    belongsTo: 'Institute',
    hasMany: { model: 'Record', name: 'record',associationKey: 'record' }
});
Ext.define('Record', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'subject',    type: 'string'},
        {name: 'CH',         type: 'float'},
        {name: 'GP',         type: 'float'},    
        {name: 'Grade',      type: 'string'},                   
        {name: 'Marks',      type: 'float'},
    ],
    belongsTo: 'Semester',
});

Ext.require('Ext.data.*');
Ext.require('Ext.grid.*');


Ext.onReady(function(){
    Ext.QuickTips.init();
    var store = new Ext.data.Store({
        model: "User",

    });

    store.load({

    });

 Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: store,
        width: 400,
        height: 200,
        title: 'Application Users',
        columns: [
            {
                text: 'Name',
                width: 100,
                sortable: false,
                hideable: false,
                dataIndex: 'email'
            },
            {
                text: 'Email Address',
                width: 150,
                dataIndex: 'course>aname',

            },
            {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'User.course.name'
            }
        ]
    });
});

Ответы [ 3 ]

5 голосов
/ 20 августа 2011

В настоящее время существует ограничение, заключающееся в том, что вложенные данные не легко загружаются в сетку по умолчанию, но над ними активно ведется работа.

1 голос
/ 01 сентября 2011

Если ваш объект json не соответствует требованиям extjs, просто измените формат объекта. Вы можете сделать что-то подобное: 

Ext.ajax.request({url: 'getRecords.php', success: function(response) {
    var data = Ext.decode(response.reseponseText);
    //format your data
    grid.loadData(formatedData);
}})

Вы также можете отформатировать объект json на стороне сервера

1 голос
/ 01 сентября 2011

возможно, сопоставление может помочь вам, я решил похожую (но более простую) проблему следующим образом: Мой json: 

{"operations": 
     [
        {"timestamp": {"__dt__": "2011-08-31T15:39:17"}, "description": "pippo"}, 
        {"timestamp": {"__dt__": "2011-08-31T16:51:43"}, "description": "pluto"}
     ]
}

Моя модель: 

Ext.define('Operation', {
    extend: 'Ext.data.Model',
    idProperty: 'timestamp.__dt__',
    fields: [{name:'__dt__', allowBlank:true, mapping:'timestamp.__dt__'},
             {name:'description', allowBlank:false}]
});

Мои столбцы: 

columns: [{header: 'Timestamp', width: 150, sortable: true, dataIndex: '__dt__'},
          {header: 'Description' , width: 100, sortable: true, dataIndex: 'description', editor:'textfield'}],

Надеюсь, это поможет ...

...