1

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?

1
  • Are you using ExtJs 3 or 4? Commented Feb 7, 2013 at 16:34

2 Answers 2

5

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/

Sign up to request clarification or add additional context in comments.

3 Comments

thanks. is there any difference, if I want to use the data in TPL?
There is no difference, you will have to iterate through the list with the XTemplate code. Check the documentation docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate I will try to make an example later.
I have never been able to get a "second" entry working with hasMany.
2

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/

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.