dataview就是數據展現組件
list是由dataview派生過來的, 美觀了一些多些也多了一些功能，如分組顯示，索引導航，disclose按鈕...
下面我們就來學習下dataview的用法及list的用法，學習他們之后你需要了解啥時后用dataview啥時后用list就像上一篇一樣，你需要知道你啥時用panel啥時用formpanel一樣。
dataview最重要的兩個配置就是store（數據源）itemtpl(數據項顯示模板)
下面來一段小代碼，實踐中學習。
//創建一個全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
//數據項顯示模板
itemTpl: '{name} is {age} years old'
});
效果：
實在是太丑了，沒法看。
我們把上面代碼中的dataview改為list
//創建一個全屏的List
var touchTeam = Ext.create('Ext.dataview.List', {
fullscreen: true,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
//數據項顯示模板
itemTpl: '{name} is {age} years old'
});
效果:
整齊了很多吧，呵呵。所以如果你一點樣式都不想玩，那么dataview你絕對傷不起。選list吧.
就這么點區別，這么簡單？
當然不是了，下面我們繼續dataview....
為了讓dataview能夠展示的好看一些，我們在itemtpl做點小動作
//創建一個全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
//數據項顯示模板
itemTpl: '<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is {age} years old</p>'
});
效果：
看起來和list基本一樣了吧，這是啥在做怪呢：樣式。
在itemTpl里面，數據項如何顯示，只要你有過硬的html+css基礎，你可以隨便發揮。
基本顯示沒問題了，我們現在該玩下store了
如果我想在列表里面添加一項怎么辦呢？
很簡單，我們可以查看一下store的API，了解一些基本的數據操作
比如，我也想加入touchteam
那么我只需要一行代碼
touchTeam.getStore().add({name:'劉江',age:15});或者使用insert方法
//創建一個全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
]
},
//數據項顯示模板
itemTpl: '<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is {age} years old</p>'
});
//添加一項
touchTeam.getStore().add({name: '劉江',age: 13});
//指定位置添加一項
touchTeam.getStore().insert(0,{name: '劉江他弟',age: 11});
效果：
看到沒，呵呵，當然你還可以調用remove或removeAt進行數據項移除.這里就不試了，你去code editor里面玩玩。
你還可以玩玩排序，如讓顯示按年年齡倒序：
touchTeam.getStore().sort("age","desc");
之前有同學問過，如何讓一些合規則的數據高亮？
恩，是可行的而且在開發中常有這樣的需求，我們又需要在itemTpl上下功夫了，比如我讓年齡大於20歲的數字高亮下
代碼：
//創建一個全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
]
},
//數據項顯示模板(我在們tpl上下了點功夫，就做到了一些數據高亮)
itemTpl: '<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>'
});
//添加一項
touchTeam.getStore().add({name: '劉江',age: 13});
//指定位置添加一項
touchTeam.getStore().insert(0,{name: '劉江他弟',age: 11});
效果：
怎樣，還不錯吧。
當然我還需要再個性化一點，那怎么搞呢？簡單的if無法處理我的需求了,那么我們還可以在tpl中添加函數，我們來完成讓每個名字前面都加上一個團隊名：touchteam
如何搞呢？
仍然是在itemtpl上下手。
代碼：
//創建一個全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
]
},
//數據項顯示模板(我在們tpl上下了點功夫，就做到了一些數據高亮)
itemTpl: Ext.create('Ext.XTemplate','<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name:this.addTeam} is <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>',{addTeam:function(value)
{
return "touchteam "+value;
}})
});
//添加一項
touchTeam.getStore().add({name: '劉江',age: 13});
//指定位置添加一項
touchTeam.getStore().insert(0,{name: '劉江他弟',age: 11});
效果：
OK了吧，在每一個名字前面加一個touchteam，呵呵，你可以按照你想要的去格式化需要顯示的內容。
再扯下dataview的事件吧，然后再講下list要不然.....呵呵
dataview有哪些事件呢，你可以通過API的events下看到，但有一些我們基本不用的，這里我講一下常用的，常用的就是點擊某一項然后做某事...
//創建一個全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
scrollable:false,
//數據源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
]
},
//數據項顯示模板(我在們tpl上下了點功夫，就做到了一些數據高亮)
itemTpl: Ext.create('Ext.XTemplate','<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name:this.addTeam} is <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>',{addTeam:function(value)
{
return "touchteam "+value;
}})
});
//添加一項
touchTeam.getStore().add({name: '劉江',age: 13});
//指定位置添加一項
touchTeam.getStore().insert(0,{name: '劉江他弟',age: 11});
//添加item項tap(按)事件
touchTeam.on("itemtap",function(list,index,target,record,e,opt){
//alert("your name is "+record.get("name"));
var txt="your name is "+record.get("name");
//通常我們會點擊一行后，然后跳到別一個 view去查看詳情
var panel=Ext.create("Ext.Panel",{fullscreen:true,html:txt,items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
//返回按鈕事件
//顯示列表頁
Ext.Viewport.setActiveItem(touchTeam);
//銷毀上次跳出的view
panel.destroy();
}}]}]});
//添加到容器
Ext.Viewport.add(panel);
//顯示
Ext.Viewport.setActiveItem(panel);
});
touchTeam.on("itemtaphold",function(list,index,target,record,e,opt){
alert("長按后：your name is "+record.get("name"));
});
這次代碼有些長,好好看備注吧
再看下效果
點擊前：
點擊一項后和長按一項后
怎樣，能消化么？
其他事件，就不一一舉例了。
開始玩我們的list了，它是dataview的兒子，所謂青出一藍勝於藍，所以它比list更強大更猛。
list除了具備dataview的所有特針外，還有上面提到的那些不同,下面我們一一來玩玩唄。
onItemDisclosure:如果為true或者一個 function 時，在每一項的右邊出現一個可點擊（三角）按鈕
下來我們來體驗他，並練習一些常和事件
認真看下面的代碼哦：
var myList=Ext.create('Ext.List', {
fullscreen: true,
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '{name}',
//點擊那個小三角會執行這里
onItemDisclosure:function(record,d,a,b,c)
{
//創建一個view，然后跳過去，還可以返回過來
var panel=Ext.create("Ext.Panel",{fullscreen:true,html:record.get("name"),items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
//返回按鈕事件
//顯示列表頁
Ext.Viewport.setActiveItem(myList);
//銷毀上次跳出的view
panel.destroy();
}}]}]});
//添加到容器
Ext.Viewport.add(panel);
//顯示
Ext.Viewport.setActiveItem(panel);
//停止事件冒泡，防止他執行itemtap事件
b.stopPropagation();
},
listeners: {
//先擇一項會執行,只是執行一次
select: function(view, record) {
//Ext自帶的 alert
Ext.Msg.alert('Selected!', 'You selected ' + record.get('name'));
},
//點擊行時執行
itemtap:function(list,index,target,record,e)
{
//當然，你也可以在點擊行的時候跳轉到別一個view，看onItemDisclosure中的代碼
Ext.Msg.alert("itemtap",record.get("name"));
}
}
});
代碼有點多，但不算復雜吧。
多看備注哦，沒啥要特別注意的。
我就們看下點擊小三角后的效果吧
剛才說了list下還分組和索引功能呢
看代碼
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
sorters: 'lastName',
//分組函數
grouper: {
groupFn: function(record) {
return record.get('lastName')[0];
}
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
//創建一個全屏的list
var myList=Ext.create('Ext.List', {
fullscreen: true,
store: store,
//分組
grouped:true,
//索引欄
indexBar:true,
itemTpl: '{firstName}++++++{lastName}',
//點擊那個小三角會執行這里
onItemDisclosure:function(record,d,a,b,c)
{
//創建一個view，然后跳過去，還可以返回過來
var panel=Ext.create("Ext.Panel",{fullscreen:true,html:record.get("name"),items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
//返回按鈕事件
//顯示列表頁
Ext.Viewport.setActiveItem(myList);
//銷毀上次跳出的view
panel.destroy();
}}]}]});
//添加到容器
Ext.Viewport.add(panel);
//顯示
Ext.Viewport.setActiveItem(panel);
//停止事件冒泡，防止他執行itemtap事件
b.stopPropagation();
},
listeners: {
//先擇一項會執行,只是執行一次
select: function(view, record) {
//Ext自帶的 alert
Ext.Msg.alert('Selected!', 'You selected ' + record.get('name'));
},
//點擊行時執行
itemtap:function(list,index,target,record,e)
{
//當然，你也可以在點擊行的時候跳轉到別一個view，看onItemDisclosure中的代碼
Ext.Msg.alert("itemtap",record.get("name"));
}
}
});
上面定義模型，創建store看不懂，先不要理。后面會講
注意分組是對我們的store里面的數據分組，store必須提供一個分組函數，
其他的看注意看備注了
效果：
分組按我們的latstName的首字符進行分組了.
好了，dataview和list的基本功有都熟悉了么？他們有啥不同？你自己去體驗，在code editor里面練習哈，多練有好處。
有問題的同學可以加入我們的社區或群：13453484在線提問，我盡速解答。
作者：Louja
出處：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此聲明，且在文章頁面給出原文連接，否則保留追究法律責任的權利。