来自《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. centos65安装docker遇到的问题

    1.安装docker后启动显示内核太低(升级内核): 网上太多方案 2.升级内核后还是启动不了docker:执行下面语句 yum install device-mapper-event-libs 步骤 ...

  2. Windows 键盘快捷键概述

    在 Windows 中工作时,利用快捷键代替鼠标.可以利用键盘快捷键打开.关闭和导航“开始”菜单.桌面.菜单.对话框以及网页.键盘还可以让您更简单地与计算机交互.  单击一个标题或按 TAB 键可以突 ...

  3. emacs之开始就加载tag

    ~/emacsConfig/original-tags.el (setq tags-table-list ' ( "~/emacsConfig/etags/muduo" " ...

  4. 关于FPGA复位的认识

    xilinx推荐尽量不复位,利用上电初始化,如果使用过程中需要复位,采用同步高复位. 如果逻辑工程较大,复位扇出会较多,会很影响时序,有以下常用方法: 复位信号按照不同时钟域分为rst0..rstn, ...

  5. web开发视频(一)之环境准备

    硬件环境: Win7+64位操作系统 1.安装 jdk.tomcat.eclipse; 2.配置 jdk 环境变量.tomcat环境变量 (jdk配置成功的标示是在命令提示符中输入 javac 给出对 ...

  6. JNI的一个简单实例

    本例子使用的操作系统MacOS, 64位JVM. JNI编写的几个步骤如下: 编写Java代码,并注明native方法: public class HelloJni { public native v ...

  7. Jquery获取用户控件页面中控件的值

    $('#<%= txt_P_name.ClientID%>').val()

  8. Web端优秀图表控件

    百度echart http://echarts.coding.io/doc/example.html C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计 ...

  9. 深入浅出 Java Concurrency (9): 锁机制 part 4 锁释放与条件变量 (Lock.unlock And Condition)

    本小节介绍锁释放Lock.unlock(). Release/TryRelease unlock操作实际上就调用了AQS的release操作,释放持有的锁. public final boolean ...

  10. thinkphp5的程序部署到虚拟主机的配置

    thinkphp5的程序部署到虚拟主机的配置 建议不要,因为这些目录文件会全部保留,那么没办法的时候咋整 1 htdocs 虚拟主机上的   把public/index.php修改 改动后的放到 ht ...