来自《sencha touch权威指南》，约193页开始
-------------------------------------
（1）app.js代码：
Ext.require(['Ext.data.Store','Ext.data.reader.Xml','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('BookInfo',{ extend: 'Ext.data.Model', config: { fields:['image_url','book_name','author','description'] } }); var bookStore = Ext.create('Ext.data.Store',{ model: 'BookInfo', autoLoad: true, proxy: { type: 'ajax', url: 'bookInfo.xml', reader: { type: 'xml', record: 'book' } } }); var bookTemplate = new Ext.XTemplate( '<tpl for=".">', '<div class="Book_img"><img src="{image_url}" /></div>', '<div class="Book_info">', '<h2>{book_name}</h2><br /><h3>作者：{author}</h3>', '<p>{description:ellipsis(50)}</p>', '</div>', '</tpl>' ); var dataview = Ext.create('Ext.DataView',{ store: bookStore, itemTpl: bookTemplate, baseCls: 'Book', }); Ext.Viewport.add(dataview); } });
（2）bookinfo.xml文件：
<?xml version="1.0" encoding="utf-8"?> <dataset> <book> <id>1</id> <image_url>images/21.jpg</image_url> <book_name>html5 与css3权威指南</book_name> <author>王美丽</author> <description>内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面</description> </book> <book> <id>2</id> <image_url>images/22.jpg</image_url> <book_name>html5 与css3权威指南</book_name> <author>王美丽</author> <description>内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面</description> </book> <book> <id>3</id> <image_url>images/23.jpg</image_url> <book_name>html5 与css3权威指南</book_name> <author>王美丽</author> <description>内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面</description> </book> </dataset>
（3）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="app.js"></script> <style type="text/css"> .Book-item{padding:10px 0 30px 178px;border-top: 1px solid #ccc;} .Book-item h2{font-weight: bold;} .Book-item .Book_img{position: absolute;left: 10px;} .Book-item .Book_img img{max-width: 159px;} .Book-itme .Book_info{position: absolute;padding-left: 5px;font-size: 12px;} .x-item-selectex{background-color: blue;color: white;} </style> </head> <body> </body> </html>
（4）显示效果
