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的时候，直接{.}就可以遍历数组中的全部变量