json - extjs ネストされたモデル

Question

Sencha Extjs は初めてで、モデルの設計に問題があります。サーバーからの応答の例を次に示します。

[
{
    "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 €"
            }
        ]
    }
}

]

この JSON 応答の機能モデルの設計を手伝っていただけませんか?

score 5 · Accepted Answer

この背後にあるビジネスロジックがどのようになっているのかはわかりませんが、すべてのレコードにブランチのリストと sromains のリストが必要な Store が必要であることがわかりました。その場合は、次のことを行う必要があります。

ブランチリストと sromains リストを含むモデルを定義します。私はResponseModelに電話しました

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

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

]
});

sromain モデルを定義する

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

ブランチモデルを定義する

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

ストアを作成する

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

最初の responseRecord のすべてのブランチを見たい場合は、これを行う必要があります

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

スローマンと同じこと

console.log(firstRecord.sromain());

ここで実際の例を見つけることができます http://jsfiddle.net/alexrom7/PVtkF/1/

score 2 · Accepted Answer

このストアを Dataview で使用する場合は、最初に XTemplate 変数を作成する必要があります。すべてのブランチを html テーブルに表示し、すべての Srdomain を別のテーブルに応答レコードごとに表示する単純な XTemplate を作成しました。

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>'
);

これで、データビューを作成できます。

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

itemTpl 属性を使用していることに注意してください。これは、作成した XTemplate を使用して「responseStore」内のすべてのレコードを表示することを意味します。表示するレコードをより詳細に制御したい場合は、データビューで tpl 属性を使用できますが、XTemplate コードで responseStore を反復処理する必要があります。

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

json - extjs ネストされたモデル

2 に答える 2

Related

Reference