Ext.data.association.hasMany一對多模型使用示例

php之路發表於2013-12-07
ASM模型

來自《sencha touch權威指南》第11章，323頁開始

---------------------------------------------------

index.html程式碼：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>sencha touch</title>
<link rel="stylesheet" type="text/css" href="css/sencha-touch.css" />
<script type="text/javascript" src="sencha-touch-debug.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
h3{background: blue;font-size: 14px;color:black;font-weight: bold;width:180px;border: solid 1px blue;background-color: skyblue;border-radius:20px;padding: 5px;}
.listHeader{display: -webkit-box;-webkit-box-orient: horicontal;}
.title{font-size: 14px;color: #FFF;text-align: center;background-color: #7088ab;width: 25%;}
.students div{width: 25%;text-align: center;border: solid 1px #ccc;float: left;}
.class{clear:left;}
</style>
</head>
<body>

</body>
</html>

app.js程式碼：

Ext.require(['Ext.DataView','Ext.TitleBar','Ext.Toolbar','Ext.Panel']);
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    
    launch: function(){
        Ext.define('Class',{
            extend: 'Ext.data.Model',
            config: {
                fields: ['id','name','studentCount'],
                hasMany:{
                    model: 'Student',name: 'students'
                },
                proxy:{
                    type: 'ajax', url: 'students.json'
                }
            }
        });

        Ext.define('Student',{
            extend: 'Ext.data.Model',
            config: {
                fields: ['number','name','age','phone']
            }
        });

        var template = new Ext.XTemplate(
            '<div class="class"><h3>{name}(學生人數：{studentCount})</h3>',
            '<div class="listHeader">',
                '<div class="title">姓名</div>',
                '<div class="title">學號</div>',
                '<div class="title">年齡</div>',
                '<div class="title">電話</div>',
            '</div>',
            '<tpl for="students">',
            '<div class="students">',
                '<div id="name">{name}</div>',
                '<div>{number}</div>',
                '<div>{age}</div>',
                '<div>{phone}</div>',
            '</div></tpl></div>'
        );

        var titlebar = Ext.create('Ext.TitleBar',{
            docked: 'top',
            title: '北京大學'
        });

        var dataview = Ext.create('Ext.DataView',{
            items: titlebar,
            itemTpl: template,
            selectedCls: 'selected',
            store: new Ext.data.Store({
                model: 'Class',
                autoLoad: true
            })
        });

        Ext.Viewport.add(dataview);
    }
});

students.json程式碼：

[
{
    "id": 1,
    "name": "2002級1班",
    "studentCount":3,
    "students":[
        {"number":"0802123","name":"張三","age":30,"phone":"0102222"},
        {"number":"0802124","name":"樑二","age":30,"phone":"0102233"},
        {"number":"0802128","name":"陳八","age":30,"phone":"0102255"}
    ]
},
{
    "id": 2,
    "name": "2002級2班",
    "studentCount":2,
    "students":[
        {"number":"0803111","name":"張三","age":20,"phone":"0202222"},
        {"number":"0803222","name":"樑二","age":20,"phone":"0202233"}
    ]
}
]

顯示結果：

相關文章