来自《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）显示效果

使用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. AT 指令和常见错误码

    一. 一般命令 1. AT+CGMI 给出模块厂商的标识. 2. AT+CGMM 获得模块标识.这个命令用来得到支持的频带(GSM 900,DCS 1800 或PCS 1900).当模块有多频带时,回 ...

  2. python多标签分类模版

    from sklearn.multioutput import MultiOutputClassifier from sklearn.ensemble import RandomForestClass ...

  3. PAT甲级目录

    树(23) 备注 1004 Counting Leaves   1020 Tree Traversals   1043 Is It a Binary Search Tree 判断BST,BST的性质 ...

  4. 通过socket实现处理多个连接,send和resv都是有数量限制的

    我们现在先来实现,跟一个人来来回回不停的讲电话. 客户端,通过循环来输入多次命令: client.recv(1024)每次只接收1K的内容 服务端来改成多次接收:如果你写成如下的代码: 那么造成的结果 ...

  5. 016：Explain

    一. Explain EXPLAIN 官方文档 1.explain说明 explain是解释SQL语句的执行计划,即显示该SQL语句怎么执行的 使用explain的时候,也可以使用desc 5.6 版 ...

  6. PyQt 5布局管理

    绝对定位 绝对定位有以下限制 1.如果调整窗口,控件的大小和位置不会改变 2.在各种平台上应用程序看起来不会一样 3.如果改变字体,我们的应用程序的布局就会改变 4.如果我们决定改变我们的布局,我们必 ...

  7. 视频编解码---x264用于编码，ffmpeg用于解码

    项目要用到视频编解码,最近半个月都在搞,说实话真是走了很多弯路,浪费了很多时间.将自己的最终成果记录于此,期望会给其他人提供些许帮助. 参考教程: http://ffmpeg.org/trac/ffm ...

  8. Java复习——I/O与序列化

    File类 java.io.File只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问,我们可以通过通过给其构造函数传一个路径来构建以文件,传入的路径名有一个小问题,就是Window ...

  9. 为什么多线程读写 shared_ptr 要加锁？

    https://www.cnblogs.com/Solstice/archive/2013/01/28/2879366.html 为什么多线程读写 shared_ptr 要加锁? 陈硕(giantch ...

  10. LinkedHashMap学习

    一.概述 LinkedHashMap继承自HashMap,是Map接口的一个具体实现,它是有序的,可以按照插入顺序先后和访问时间先后进行排序,选择哪种排序方式取决于在新建LinkedHashMap的时 ...