来自于《sencha touch权威指南》第八章，183页左右

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

一、app.js代码：

Ext.require(['Ext.data.Store','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('User',{

            extend: 'Ext.data.Model',

            config: {

                fields: ['firstName','lastName']

            }

        });

        var store = Ext.create('Ext.data.Store',{

            model: 'User',

            data: [{

                firstName:'张三',lastName:'张'

            },{

                firstName:'李四',lastName:'李'

            },{

                firstName:'昭君',lastName:'王'

            },{

                firstName:'龙女',lastName:'小'

            }]

        });

        var panel = Ext.create('Ext.Panel',{

            docked: 'top',

            layout: 'hbox',

            items:[{

                baseCls: 'title',html:'姓'

            },{

                baseCls: 'title',html: '名'

            }]

        });

        var dataview = Ext.create('Ext.DataView',{

            fullscreen: true,

            store: store,

            baseCls: 'user',

            items: [panel],

            itemTpl: '<div>{lastName}</div><div>{firstName}</div>'

        });

        Ext.Viewport.add(dataview);

    }

});

二、index.html代码（与以前示例相比，只是多添加了几个css样式）

<!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">

.title{font-size:14px;color:#FFF;text-align: center;background-color: #7088AD;width:50%;}

.user-item{width: 100%;display: -webkit-box;-webkit-box-orient:horizontal;}

.user-item div{width: 50%;text-align: center;border-left: solid 1px #7088AD;border-bottom: solid 1px #7088AD;}

.x-item-selected{background-color:blue;color:white;}

</style>

</head>

<body>

</body>

</html>

三、效果显示：

使用 dataview 组件制作一览表的更多相关文章

  1. sencha touch笔记（5）——DataView组件（1）

    1.DataView组件可以显示列表,图像等等的组件或者元素,特别适用于数据仓库频繁更新的情况.比如像显示新闻或者微博等等的很多相同样式的组件的列表这种一次性从后台或者数据源拿取很多数据展示的样式.比 ...

  2. Flutter实战视频-移动电商-13.首页_广告Banner组件制作

    13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 ...

  3. ReactNative: 将自定义的ReactNative组件制作成第三方库的详细流程(制作-->发布)

    一.简介 在讲本篇博文之前,需要你熟知怎么自定义ReactNative组件,然后才好学习将自定义的ReactNative组件制作成第三方库.本文中的自定义的ReactNative组件LoginMana ...

  4. 编写Java程序，使用菜单组件制作一个记事本编辑器

    返回本章节 返回作业目录 需求说明: 使用菜单组件制作一个记事本编辑器 实现思路: 创建记事本菜单工具栏JMenuBar. 创建多个菜单条JMenu. 创建多个菜单项JMenuItem. 将菜单添加至 ...

  5. DevExpress - 使用 GaugeControl 标尺组件制作抽奖程序 附源码

    前不久,公司举办了15周年庆,其中添加了一个抽奖环节,要从在读学员中随机抽取幸运学员,当然,这个任务就分到了我这里. 最后的效果如下,启动有个欢迎页面,数据是来自Excel的,点击开始则上面的学号及姓 ...

  6. HTML5 本地存储+layer弹层组件制作记事本

    什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这 ...

  7. 浅谈控件(组件)制作方法一（附带一delphi导出数据到Excel的组件实例）（原创）

    来自:http://blog.csdn.net/zhdwjie/article/details/1490741 -------------------------------------------- ...

  8. 使用dataview组件显示服务器端xml文件数据

    来自<sencha touch权威指南>,约193页开始 ------------------------------------- (1)app.js代码: Ext.require([' ...

  9. dataview 组件使用示例

    来自<sencha touch 权威指南> ------------------------------- 例子1——app.js代码如下: Ext.require(['Ext.data. ...

随机推荐

  1. bzoj 1864 三色二叉树

    Written with StackEdit. Description Input 仅有一行,不超过\(5*10^5\)个字符,表示一个二叉树序列. Output 输出文件也只有一行,包含两个数,依次 ...

  2. Dijkstra算法（带路径模板）

    个人心得:Dijkstra算法是贪心思想的一种延伸,注意路径pre,pre数组表示此时最短路径中的前一个顶点.每次更新到目的点时更新: 从源点出发,更新路径,然后找出此时最短的点,然后以这个点为头,看 ...

  3. VBA程序的调试

    VBA程序的调试:设置断点.单步跟踪.设置监视窗 Acces的VBE编程环境提供了完整的一套调试工具和调试方法.熟练掌握好这些调试工具和调试方法的使用,可以快速.准确地找到问题所在,不断修改,加以完善 ...

  4. MDK中STM32使用Printf函数详细解析【转载】

    在用MDK调试STM32板子串口时,为了方便串口调试,调用了printf()函数,用Keil仿真是,串口不能正确的输出,软件仿真时,总是卡在那 里.有点纳闷,然后调用USART_SendData()函 ...

  5. 12C中Profile的使用

    12c中PROFILE在PDB和CDB中是公用的,不过创建的profile名称在CDB和PDB有所不同. 如: 1.CDB中创建Profile SQL> show con_name CON_NA ...

  6. 洛谷3004 [USACO10DEC]宝箱Treasure Chest

    题目:https://www.luogu.org/problemnew/show/P3004 一眼看上去就是记忆化搜索的dp.像 一双木棋 一样. 结果忘了记忆化.T了5个点. 然后加上记忆化.MLE ...

  7. win7 安装过程中遇到的错误解决方法

    win7 安装过程中遇到的错误解决方法 windows安装无法继续.若要安装windows 请单击 确定 重新启动计算机: 当 出现如上提示的时候,按下shift+f10 会打开命令窗口,进入到C:\ ...

  8. (转)Oracle 临时表用法

    本文转载自:http://www.iteye.com/topic/371390 ORACLE的临时表在应用系统中有很大的作用,它可以让用户只能够操作各自的数据中而互不干扰,不用担心会破坏或影响其他SE ...

  9. 1009 Product of Polynomials

    题意:模拟多项式相乘 思路:略.有一个注意点,题目中说指数最大为1000,当两个多项式相乘后,指数最大就为2000,这一点不注意会出现段错误. 代码: #include <cstdio> ...

  10. python学习（十八） 程序打包

    18.1  Distutils基础 18.2 打包 18.2.1 建立存档文件 18.2.2 创建Windows安装程序或RPM包 18.3 编译扩展 18.4 使用py2exe创建可执行程序