来自《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. c++ 异常处理（3）

    <C++编码规范与指导>一文,就已经规划着要加入这样一篇讨论 C++ 异常机制的文章了.没想到时隔几年以后才有机会把这个尾巴补完 :-). 还是那句开场白:“在恰当的场合使用恰当的特性” ...

  2. GOF23设计模式之原型模式（prototype）

    一.原型模式概述 1.通过new产生一个对象需要非常繁琐的数据准备和访问权限,则可以使用原型模式. 2.就是java中的克隆技术,以某个对象为原型,复制出新的对象,显然,新的对象具备原型对象的特点. ...

  3. Linux下压缩与解压

    转自:http://www.mike.org.cn/blog/index.php?load=read&id=218###pp=0 [在解压或压缩的时候,一般还使用-v选项来现实正在处理的文件信 ...

  4. scrapy-redis组件

    scrapy-redis组件 可以帮你保存任务和过滤url redis 数据库 安装 # 下载 wget http://download.redis.io/releases/redis-3.0.6.t ...

  5. 10 删除topic中的数据

    1 打开    server.properties2  添加一条:  delete.topic.enable=true 3  执行命令:   bin/kafka-topics.sh --delete ...

  6. OCR （Optical Character Recognition，光学字符识别）

    OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形状翻译 ...

  7. Node.js的适用场景

    高并发.聊天.实时消息推送.服务器做前端资源压缩

  8. 在spring中该如何使用DTO，以及DTO和Entity的关系

    1. DTO是用于将后台的数据结构(javaBean)转换为对用户友好的表现方式的数据结构,同时也能防止后台数据直接传送到前台而存在的潜在危险. 2. 可以时候要哪个springbot框架提供的转换器 ...

  9. linux中的常用压缩与解压缩命令

    linux中常用的压缩格式有   .zip   .gz   .bz2   .tar.gz   .tar.bz2 一..zip 1.命令格式 zip 压缩文件名 源文件名         (压缩文件到当 ...

  10. PHP中composer的安装和使用

    $ composer ______ / ____/___  ____ ___  ____  ____  ________  _____ / /   / __ \/ __ `__ \/ __ \/ __ ...