ExtJS 4網格：顯示與關聯的嵌套數據模型

我是ExtJS的新手，並且遇到問題。我有一個深嵌套的json數據，我已經成功地使用多個關聯模型加載到商店中。但對於下一步，我無法在簡單的網格中顯示此數據，請幫助。我怎樣才能顯示在位於json的內心深處該網格的東西....這是我的JSONExtJS 4網格：顯示與關聯的嵌套數據模型

{ 
     "success" : "true", 
     "total":2, 
     "user" : 
     { 
      "id" : 12, 
      "email" : "[email protected]",   
      "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' 
      } 
     ] 
    }); 
});

來源

2011-08-20 David

這是目前默認情況下嵌套數據不容易加載到網格中的限制，但是它正在積極地開展工作。

來源

2011-08-20 15:07:23

格式化你的JSON對象「前Ext JS的創始人和核心開發者」我相信你對這個:) –

2年已經過去了。有沒有積極的轉變？ –

ExtJS爲什麼不能做其他小型項目可以做的：只渲染整個JSON樹？ –

也許映射可以幫助你，我已經解決了這種方式類似（但更簡單）的問題：我的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'}],

希望它可以幫助...

來源

2011-09-01 07:53:18 ivy

如果您的json對象不符合extjs要求，只需更改對象格式即可。你可以做同樣的事情：

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

您也可以在服務器端

來源

2011-09-01 08:50:33 Ivan

ExtJS 4網格：顯示與關聯的嵌套數據模型

回答

相關問題