将动态JSON数据嵌套到Extjs模型

Question

I want to transform this json to Extjs Model:

{
  "TableHour": {
    "0": {
      "Rx": 0,
      "Tx": 0
    },
    "1": {
      "Rx": 2,
      "Tx": 0
    },
    "2": {
      "Rx": 0,
      "Tx": 0
    },
    "3": {
      "Rx": 6,
      "Tx": 0
    }
  }
}

I've tried :

Ext.define("TableHour", {
            extend: 'Ext.data.Model',
        hasMany:  { model:'TableMode' }
    });

    Ext.define("TableMode", {
        extend: 'Ext.data.Model',
        fields: [
        'Rx','Tx'
        ],          
        belongsTo: 'TableHour',
    });     

    var store1 = Ext.create('Ext.data.JsonStore',{
        autoLoad: true,
        model:'TableHour',
        proxy:{
            type:'ajax',
            url:'HoursReports.json',
            reader:{
                type: 'json',
            }
        }

    });   
    console.log(store1.getAt(0));

But the last line, print "undefined". It's sure that model definition is wrong. The numbers "0" "1" "2" "3" aren't declared in my model beacause they're dynamically generated... how can i do?

Answer 1

Your JSON data appears to contain an object with numeric properties as a collection. In order to work with ExtJS this should be an array instead:

{
  "TableHour": [
    {
      "Rx": 0,
      "Tx": 0
    },{
      "Rx": 2,
      "Tx": 0
    },{
      "Rx": 0,
      "Tx": 0
    },{
      "Rx": 6,
      "Tx": 0
    }
  ]
}

Now, if you want to work with a store, then TableHour should be the data root and there should be only one model "TableMode":

Ext.define("TableMode", {
    extend: 'Ext.data.Model',
    fields: [
        'Rx', 'Tx'
    ]
});

var store1 = Ext.create('Ext.data.JsonStore',{
    autoLoad: true,
    model: 'TableMode',
    proxy: {
        type:'ajax',
        url: 'HoursReports.json',
        reader: {
            type: 'json',
            root: 'TableHour'
        }
    }
});

Check out this fiddle for a working example.

Answer 2

Instead of loading the store automatically using its load () method, you could load the data with Ext.Ajax.request () and transform the data in the success callback such that it has the required format. Then you can feed it into your store.

The data has to look something like this :

{
  "TableHour": [
    {
      "Id": 0,
      "Rx": 0,
      "Tx": 0
    },{
      "Id": 1,
      "Rx": 2,
      "Tx": 0
    },{

Answer 3

I've modified my backend generated Json. Now my json is:

{
  "Date": null,
  "TableHourDto": [
    {
      "Hour": "0",
      "Rx": 3,
      "Tx": 5
    },
    {
      "Hour": "1",
      "Rx": 2,
      "Tx": 0
    },
    {
      "Hour": "2",
      "Rx": 0,
      "Tx": 0
    },
    {
      "Hour": "3",
      "Rx": 5,
      "Tx": 0
    }
}

My Extjs model is:

Ext.define("TableHour", {
                extend: 'Ext.data.Model',       
                fields: [
                'Hour','Rx','Tx'
                ],
            });

And my store:

var store1 = Ext.create('Ext.data.JsonStore',{
                autoLoad:true,
                proxy:{
                    type:'ajax',
                    url:'HoursReports.json',                    
                    reader:{
                        type: 'json',
                        model:'TableHour',
                        root: 'TableHourDto',
                        listeners : {
                            exception: function( reader, response, error, eOpts ){
                                console.log('Got exception');
                            }
                        }
                    }                   
                },
                listeners:{
                    load:function( store, records, successful, eOpts ){
                        console.log(store.getAt(0).data);
                        // This print first: Object {Hour: "0", Rx: 3, Tx: 5}
                    }
                }
            }); 

Having this store, i will build relative Charts... Thank all for reply