extjs nested model

Question

I'm new to Sencha Extjs and I'm experiencing model designing problem. Here is a sample response from server:

[
{
    "success": "true",
    "data": {
        "sromain": [
            {
                "corporation": "DEV 1 s.r.o.",
                "dbName": "dev_1_s_r_o_",
                "prijmyCelk": "2 106,00 €",
                "nakladyCelk": "2 049,00 €",
                "ziskCelk": "57,00 €",
                "neuhrVydCelk": "2 106,00 €",
                "neuhrPrijCelk": "2 049,00 €",
                "dph": "9,52 €"
            }
        ],
        "branches": [
            {
                "branch_name": "Bratislava",
                "branch_code": "BA",
                "strediskoprijmyCelk": "180,00 €",
                "strediskonakladyCelk": "0,00 €",
                "strediskoziskCelk": "180,00 €",
                "strediskoneuhrVydCelk": "180,00 €",
                "strediskoneuhrPrijCelk": "0,00 €",
                "streddphCelk": "30,00 €"
            },
            {
                "branch_name": "Banská Bystrica",
                "branch_code": "BB",
                "strediskoprijmyCelk": "600,00 €",
                "strediskonakladyCelk": "0,00 €",
                "strediskoziskCelk": "600,00 €",
                "strediskoneuhrVydCelk": "600,00 €",
                "strediskoneuhrPrijCelk": "0,00 €",
                "streddphCelk": "100,00 €"
            },
            {
                "branch_name": "Centrála",
                "branch_code": "C",
                "strediskoprijmyCelk": "666,00 €",
                "strediskonakladyCelk": "213,00 €",
                "strediskoziskCelk": "453,00 €",
                "strediskoneuhrVydCelk": "666,00 €",
                "strediskoneuhrPrijCelk": "213,00 €",
                "streddphCelk": "75,52 €"
            },
            {
                "branch_name": "Košice",
                "branch_code": "KE",
                "strediskoprijmyCelk": "420,00 €",
                "strediskonakladyCelk": "1 836,00 €",
                "strediskoziskCelk": "-1 416,00 €",
                "strediskoneuhrVydCelk": "420,00 €",
                "strediskoneuhrPrijCelk": "1 836,00 €",
                "streddphCelk": "-236,00 €"
            },
            {
                "branch_name": "Nitra",
                "branch_code": "NR",
                "strediskoprijmyCelk": "240,00 €",
                "strediskonakladyCelk": "0,00 €",
                "strediskoziskCelk": "240,00 €",
                "strediskoneuhrVydCelk": "240,00 €",
                "strediskoneuhrPrijCelk": "0,00 €",
                "streddphCelk": "40,00 €"
            }
        ]
    }
}

]

Could you please help me with designing a functional model for this JSON response?

Answer 1

If you want to use this store with a Dataview you need to create a XTemplate variable first. I created a simple XTemplate that shows all the Branches in a html table and all the Srdomains in another table for every Response Record.

var tpl = new Ext.XTemplate(
'<h2 class="response-label">Response Record id = {#}</h2>',
'<table>',
'<caption>Branches:</caption>',
'<tr>',    
             '<th>Branch Code</th>', 
             '<th>Branch Name</th>',
 '</tr>',   
'<tpl for="(branches)">',
    '<tr>',    
             '<td>{branch_code}</td>',  
             '<td>{branch_name}</td>',
    '</tr>',    
'</tpl>',
'</table>',

'<table>',
'<caption>Sromains:</caption>',
'<tr>',    
             '<th>DBName</th>', 
             '<th>Corporation</th>',
 '</tr>',   
'<tpl for="(sromain)">',
    '<tr>',    
             '<td>{dbName}</td>',  
             '<td>{corporation}</td>',
    '</tr>',    
'</tpl>',
'</table>'
);

Now you can create the Dataview.

Ext.create('Ext.DataView', {
renderTo          : Ext.getBody(),
store             : Ext.getStore('responseStore'),
itemTpl               : tpl    
});

Notice that I used the itemTpl attribute, this means that the XTemplate that we created will be used to display every record in the "responseStore". If you want to have more control over the records that you want to be displayed, you could use the tpl attribute in the dataview, but then you will have to iterate through the responseStore in your XTemplate code.

http://jsfiddle.net/alexrom7/4Zs5H/1/

Answer 2

I don't know how is the business logic behind this, but what I understood is that you need a Store that for every record should have a list of branches and a list of sromains. If that is the case, you should do the following:

Define the Model that will contain the branches list and the sromains list. I called ResponseModel

Ext.define("ResponseModel", {
extend: 'Ext.data.Model',
fields: [],

hasMany: [{
    model: 'Sromain',
    name: 'sromain'
}, {
    model: 'Branch',
    name: 'branches'
}

]
});

Define the sromain Model

Ext.define("Sromain", {
extend: 'Ext.data.Model',
fields: [
    'corporation',
    'dbName',
    'prijmyCelk',
    'nakladyCelk',
    'ziskCelk',
    'neuhrVydCelk',
    'neuhrPrijCelk',
    'dph'],
belongsTo: 'ResponseModel'
});

Define the branch Model

Ext.define("Branch", {
extend: 'Ext.data.Model',
fields: [
    'branch_name',
    'branch_code',
    'strediskoprijmyCelk',
    'strediskonakladyCelk',
    'strediskoziskCelk',
    'strediskoneuhrVydCelk',
    'strediskoneuhrPrijCelk',
    'streddphCelk'],
belongsTo: 'ResponseModel'
});

Create the store

var store = Ext.create('Ext.data.Store', {
model: "ResponseModel",
autoLoad: true,
data: data,
proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'data'
    }
}
});

If you want to see all the branches of the first responseRecord, you have to do this

var firstRecord = store.getAt(0);
console.log(firstRecord.branches());

The same thing with the sromains

console.log(firstRecord.sromain());

Here you can find a working example http://jsfiddle.net/alexrom7/PVtkF/1/