sencha touch(7)——list组件
1.list组件是一个很强大的组件。用于以一览表的形式或者列表的形式展示应用程序中的大量的数据。该组件使用XTemplate模版来显示数据,同时与数据仓库进行绑定。所以当数据仓库中的数据发生变化的时候,List组件会将这个变化反映在页面上。
Ext.DataView.List组件继承自DataView组件。简单的创建一个list:
var myList = Ext.create('Ext.List', {
store : store,
itemTpl: '<div>{lastname}{firstname}</div>'//指定的List组件里面内部使用的XTemplate模版
});
2.在学习list组件之间先去看一个很重要的和它息息相关的XTemplate模版。DataView组件当然也和它息息相关,以后做到数据层肯定会去看的。使用XTemplate模版用来方便的创建面板内的HTML元素与代码,还能够很方便的在脚本中编写一段可以使用数据仓库中数据的HTML代码。直接在javascript中定义XTemplate模版:
var tpl = new Ext.XTemplate(
'<div>', //html代码太长则用‘,’隔开
'{string_value}', //用大括号来设置读入模版之后再进行设置的变量
'</div>'
);
var newHtml = tpl.apply(data);
使用XTemplate模版的apply方法可以将脚本中定义的变量值应用到模版中去,并且会返回一个代表一个赋值之后的HTML代码的变量。
在list的创建中,创建tpl的代码举个例子:
itemTpl: new Ext.XTemplate(
'<div>{name}</div>'
),
store: 'Course_store',
listeners: {
itemtap: function() {
Ext.Msg.alert('!');
}
},
可见定义了一个很简单的html代码段,只是输出name的值而已。list组件的创建需要有store的配合给予数据的支持和配合。当然list的每一行都有它们的事件在那里,可以随时用来监听,如例所示实现了监听点击list item的事件。
3.可以使用<tpl for=".">......</tpl>对数据数组进行遍历,其中使用{#}可以显示数据数组中的编号。还可以用来读取一个对象某个属性值中的数组,用<tpl for='attributeName'>...{x}</tpl>当然是遍历。如果用parent对象则可以访问父对象的属性或者成员,例如 {parent.name}则是访问了父对象的name的属性值;当然,在使用tpl和for的时候,直接{.}就可以遍历数组中的全部变量
最新文章
- JavaScript中数组操作常用方法
- 将List转换为二维数组(result)
- Linux 磁盘的组成
- 如何用 freebayes call SNP
- 工程移除CocoaPods依赖库
- Unity3D角色攻击范围判定和攻击判定
- ANDROID_MARS学习笔记_S01原始版_014_WIFI
- IT人员应该怎么跳槽
- 设置root远程连接ubuntu上mysql
- codeforces gym 100463I Yawner
- Tkinter类之窗口部件类
- CSS蒙版
- 在vmware里面免费安装纯净的xp虚拟机
- jumpserver篇--安装
- order by 导出数据不一致的问题
- php 函数中静态变量的问题
- BZOJ2435:[NOI2011]道路修建 (差分)
- Docker图形界面管理之Portainer
- 洛谷 P1023 税收与补贴问题 (2000NOIP提高组)
- HDU 1057 What Are You Talking About trie树 简单