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响应的功能模型吗？

Answer 1

我不知道这背后的业务逻辑是怎样的，但我所理解的是你需要一个商店，每个记录都应该有一个分支列表和一个sromains列表。如果是这种情况，您应该执行以下操作：

定义将包含分支列表和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());

与sromains相同的事情

console.log(firstRecord.sromain());

在这里你可以找到一个有效的例子 http://jsfiddle.net/alexrom7/PVtkF/1/

Answer 2

如果要将此商店与Dataview一起使用，则需要首先创建XTemplate变量。我创建了一个简单的XTemplate，它显示了html表中的所有分支以及每个响应记录的另一个表中的所有Srdomains。

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/

extjs嵌套模型

2 个答案: