来自于《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>
三、效果显示：
