来自《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"}
]
}
]
显示结果：
