来自于《sencha touch权威指南》第八章，183页左右
-----------------------------------
一、app.js代码：
Ext.require(['Ext.data.Store','Ext.dataview.DataView']);
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png', launch: function(){ Ext.define('User',{
extend: 'Ext.data.Model',
config: {
fields: ['firstName','lastName']
}
}); var store = Ext.create('Ext.data.Store',{
model: 'User',
data: [{
firstName:'张三',lastName:'张'
},{
firstName:'李四',lastName:'李'
},{
firstName:'昭君',lastName:'王'
},{
firstName:'龙女',lastName:'小'
}]
}); var panel = Ext.create('Ext.Panel',{
docked: 'top',
layout: 'hbox',
items:[{
baseCls: 'title',html:'姓'
},{
baseCls: 'title',html: '名'
}]
}); var dataview = Ext.create('Ext.DataView',{
fullscreen: true,
store: store,
baseCls: 'user',
items: [panel],
itemTpl: '<div>{lastName}</div><div>{firstName}</div>'
});
Ext.Viewport.add(dataview);
}
});
二、index.html代码（与以前示例相比，只是多添加了几个css样式）
<!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="app.js"></script>
<style type="text/css">
.title{font-size:14px;color:#FFF;text-align: center;background-color: #7088AD;width:50%;}
.user-item{width: 100%;display: -webkit-box;-webkit-box-orient:horizontal;}
.user-item div{width: 50%;text-align: center;border-left: solid 1px #7088AD;border-bottom: solid 1px #7088AD;}
.x-item-selected{background-color:blue;color:white;}
</style>
</head>
<body> </body>
</html>
三、效果显示：