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的时候，直接{.}就可以遍历数组中的全部变量
转载于:https://www.cnblogs.com/riasky/p/3476305.html
