来自《sencha touch权威指南》，约193页开始

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

（1）app.js代码：

  1. Ext.require(['Ext.data.Store','Ext.data.reader.Xml','Ext.dataview.DataView']);
  2. Ext.application({
  3.     name: 'MyApp',
  4.     icon: 'images/icon.png',
  5.     glossOnIcon: false,
  6.     phoneStartupScreen: 'images/phone_startup.png',
  7.     tabletStartupScreen: 'images/tablet_startup.png',
  8.  
  9.     launch: function(){
  10.         Ext.define('BookInfo',{
  11.             extend: 'Ext.data.Model',
  12.             config: {
  13.                 fields:['image_url','book_name','author','description']
  14.             }
  15.         });
  16.  
  17.         var bookStore = Ext.create('Ext.data.Store',{
  18.             model: 'BookInfo',
  19.             autoLoad: true,
  20.             proxy: {
  21.                 type: 'ajax',
  22.                 url: 'bookInfo.xml',
  23.                 reader: {
  24.                     type: 'xml',
  25.                     record: 'book'
  26.                 }
  27.             }
  28.         });
  29.  
  30.         var bookTemplate = new Ext.XTemplate(
  31.             '<tpl for=".">',
  32.             '<div class="Book_img"><img src="{image_url}" /></div>',
  33.             '<div class="Book_info">',
  34.             '<h2>{book_name}</h2><br /><h3>作者：{author}</h3>',
  35.             '<p>{description:ellipsis(50)}</p>',
  36.             '</div>',
  37.             '</tpl>'
  38.         );
  39.  
  40.         var dataview = Ext.create('Ext.DataView',{
  41.             store: bookStore,
  42.             itemTpl: bookTemplate,
  43.             baseCls: 'Book',
  44.         });
  45.  
  46.         Ext.Viewport.add(dataview);
  47.     }
  48. });

（2）bookinfo.xml文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <dataset>
  3.  
  4. <book>
  5.     <id>1</id>
  6.     <image_url>images/21.jpg</image_url>
  7.     <book_name>html5 与css3权威指南</book_name>
  8.     <author>王美丽</author>
  9.     <description>内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面</description>
  10. </book>
  11. <book>
  12.     <id>2</id>
  13.     <image_url>images/22.jpg</image_url>
  14.     <book_name>html5 与css3权威指南</book_name>
  15.     <author>王美丽</author>
  16.     <description>内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面</description>
  17. </book>
  18. <book>
  19.     <id>3</id>
  20.     <image_url>images/23.jpg</image_url>
  21.     <book_name>html5 与css3权威指南</book_name>
  22.     <author>王美丽</author>
  23.     <description>内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面内容系统全面</description>
  24. </book>
  25. </dataset>

（3）index.html文件

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>sencha touch</title>
  6. <link rel="stylesheet" type="text/css" href="css/sencha-touch.css" />
  7. <script type="text/javascript" src="sencha-touch-debug.js"></script>
  8. <script type="text/javascript" src="app.js"></script>
  9. <style type="text/css">
  10. .Book-item{padding:10px 0 30px 178px;border-top: 1px solid #ccc;}
  11. .Book-item h2{font-weight: bold;}
  12. .Book-item .Book_img{position: absolute;left: 10px;}
  13. .Book-item .Book_img img{max-width: 159px;}
  14. .Book-itme .Book_info{position: absolute;padding-left: 5px;font-size: 12px;}
  15. .x-item-selectex{background-color: blue;color: white;}
  16.  
  17. </style>
  18. </head>
  19. <body>
  20.  
  21. </body>
  22. </html>

（4）显示效果

使用dataview组件显示服务器端xml文件数据的更多相关文章

  1. Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据

    今天学习了下DataView如何显示JSON文件数据,废话不多说,直接贴代码: 首先看下文件目录: 然后看下我们要处理的JSON文件,bookInfo.json. { "success&qu ...

  2. android开发 解析服务器端xml文件数据存储到android客户端SQLite数据库

    以下面xml文件为例对其解析(假设此xml就在服务器端Server项目下的servlet包下的MenuServlet文件的输出流中): <?xml version="1.0" ...

  3. Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  4. Ajax实现xml文件数据插入数据库（二）--- ajax实现与jsp的数据交互。

    在上一篇文章中我们成功得到了重新组织后的数据,接下来需要做的便是将数据插入到数据库中了.在与数据库打交道的过程中有一些方法是普遍的,我们将这些通用方法封装到一个DbUtil类中,以便复用,封装好的Db ...

  5. 编写Java程序，使用 dom4j 解析上一节王者荣耀“英雄”对应的Xml文件数据内容，打印输出，具体格式

    查看本章节 查看作业目录 需求说明: 使用 dom4j 解析上一节王者荣耀"英雄"对应的Xml文件数据内容,打印输出,具体格式如图所示 实现思路: 创建ParseHeroXML用于 ...

  6. JS读取XML文件数据并以table显示数据(兼容IE火狐)

    先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinf ...

  7. XML文件数据操作

    #region XML序列化文件和反序列化 /// <summary> /// 通用类的保存函数,可以将已经声明过可序列化的类以文件方式保存起来. /// 保存格式分为 XML明文式和 二 ...

  8. PHP读取XML文件数据

    XML文件 <?xml version="1.0" encoding="UTF-8"?> <node> <student> ...

  9. 使用GridView来获取xml文件数据

    在任何一个系统中,数据的读取和编辑都是至关重要的.无论你是CS还是BS,都需要对数据进行操作.其实 我们可以发现,很多软件和系统最终都是对于数据库中数据的处理.之前在CS的学习过程中我们接触到了很多 ...

随机推荐

  1. laravel的blade模板的布局嵌套

    测试路由 Route::get('/', function() { $value = [,,]; return view('home.index', array('data' => $value ...

  2. 非常漂亮js动态球型云标签特效代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" import="j ...

  3. wamp-php 集成环境的基础配置

    域名访问设置(本地局域网) 用记事本打开 127.0.0.1是本地回环地址 配置完后 通过在本地浏览器输入www.0705.com就可以访问本地站点了 Wamp集成环境多站点配置 配置条件: 一个服务 ...

  4. FastClick

    处理移动端click事件300毫秒延迟.FastClick 是一个简单,易于使用的js库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 1.为什么会延迟? 从点击屏 ...

  5. Julia - 匿名函数

    Julia 中的函数可以被匿名构造,成为匿名函数,匿名函数是没有函数名的函数 julia> x -> x + 1 #3 (generic function with 1 method) 这 ...

  6. cinder-backup详细介绍

    首先介绍Snapshot snapshot可以为volume创建快照,快照中保存了volume当前的状态,此后可以通过snapshot回溯 主要采用了Copy On Write算法.进行快照时,不牵涉 ...

  7. 3.docker学习之docker与虚拟化

    虚拟化技术是一个总称,是一系列实现虚拟技术的统称.从广义上来说,虚拟化技术包括了虚拟机技术和容器技术, 所谓虚拟化技术最大的特点就是将一个真实的机器进行虚拟地分割,然后分割出来的部分可以独立使用   ...

  8. Tkinter tkMessageBox

            Tkinter tkMessageBox: tkMessageBox模块用于显示在您的应用程序的消息框.此模块提供了一个功能,您可以用它来显示适当的消息  tkMessageBox模块 ...

  9. day9-Memcached & Redis使用

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  10. PHP5缓存插件

    1.1操作码介绍及缓存原理 当客户端请求一个PHP程序时,服务器的PHP引擎会解析到该PHP程序,并将其变异为特定的操作码文件(OperateCode opcode),这是要执行的PHP代码的一种二进 ...