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的時候，直接{.}就可以遍歷數組中的全部變量