来自《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. pycaffe + anaconda2 + python2.7.配置

    1.首先要把caffe-windows用VS2013编译好(这一步很多门道,很麻烦很多坑),编辑props文件,使python支持选项开启,单独编译pycaffe项目就可以 2.将生成的在build/ ...

  2. SAE部署Django1.6+MySQL

    [解决]SAE部署Django1.6+MySQL 终于可以舒口气了,今天大部分时间都在搞这个,很是蛋疼,网上资料良莠不齐,我不信这个之前没人做过,但是他们确实分享的不够好. 废话不多说,还是记录一下今 ...

  3. POJ 2785 4 Values whose Sum is 0（折半枚举+二分）

    4 Values whose Sum is 0 Time Limit: 15000MS   Memory Limit: 228000K Total Submissions: 25675   Accep ...

  4. 1103 Integer Factorization

    题意:给出一个正整数N,以及k,p,要求把N分解成k个因式,即N=n1^p + n2^p + ... + nk^p.要求n1,n2,...按降序排列,若有多个解,则选择n1+n2+...+nk最大的, ...

  5. JVM内存管理和问题简要分析学习

      Java中我们基本上不会显式地调用分配内存的函数,分配内存和回收内存都由JVM自动完成了.   所谓物理内存就是我们通常说的RAM(随机存储器),计算机中还有一个存储单元叫做寄存器,用于存储计算单 ...

  6. 20181106_线程之异常_取消_变量_安全Lock

    一. 线程的异常处理: try { TaskFactory taskFactory = new TaskFactory(); List<Task> taskList = new List& ...

  7. JS-用法

    JavaScript 用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 & ...

  8. 函数和object

    普通函数 在javascript中,函数是一等公民,函数在javascript是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用. 一.函数调用形式 函数调用形式是最常见的形式,也是 ...

  9. IDA Pro 权威指南学习笔记(九) - 数据搜索

    Search -> Next Code 命令将光标移动到下一个包含指令的位置 Jump -> Jump to Function 命令可以打开所有函数,可以迅速选择一个函数并导航到该函数所在 ...

  10. C++何时使用引用