浅谈Sencha Touch中列表案例实现

Sencha Touch中列表案例实现是本文要介绍的内容，主要是来了解Sencha Touch中列表的应用。这个例子展示了列表是如和生成的，共有三个tab，每个tab展示了不同的列表形式，其中第三个列表只有在手机上才能看到完整的效果。

newExt.Application({  
launch:function(){  
Ext.regModel('Contact',{  
fields:['firstName','lastName']  
});  
ListStore=newExt.data.Store({  
model:'Contact',  
sorters:'firstName',  
getGroupString:function(record){  
returnrecord.get('firstName')[0];  
},  
data:[  
{firstName:'Julio',lastName:'Benesh'},  
{firstName:'Julio',lastName:'Minich'},  
{firstName:'Tania',lastName:'Ricco'},  
{firstName:'Odessa',lastName:'Steuck'},  
{firstName:'Nelson',lastName:'Raber'},  
{firstName:'Tyrone',lastName:'Scannell'},  
{firstName:'Allan',lastName:'Disbrow'},  
{firstName:'Cody',lastName:'Herrell'},  
{firstName:'Julio',lastName:'Burgoyne'},  
{firstName:'Jessie',lastName:'Boedeker'},  
{firstName:'Allan',lastName:'Leyendecker'},  
{firstName:'Javier',lastName:'Lockley'},  
{firstName:'Guy',lastName:'Reasor'},  
{firstName:'Jamie',lastName:'Brummer'},  
{firstName:'Jessie',lastName:'Casa'},  
{firstName:'Marcie',lastName:'Ricca'},  
{firstName:'Gay',lastName:'Lamoureaux'},  
{firstName:'Althea',lastName:'Sturtz'},  
{firstName:'Kenya',lastName:'Morocco'},  
{firstName:'Rae',lastName:'Pasquariello'},  
{firstName:'Ted',lastName:'Abundis'},  
{firstName:'Jessie',lastName:'Schacherer'},  
{firstName:'Jamie',lastName:'Gleaves'},  
{firstName:'Hillary',lastName:'Spiva'},  
{firstName:'Elinor',lastName:'Rockefeller'},  
{firstName:'Dona',lastName:'Clauss'},  
{firstName:'Ashlee',lastName:'Kennerly'},  
{firstName:'Alana',lastName:'Wiersma'},  
{firstName:'Kelly',lastName:'Holdman'},  
{firstName:'Mathew',lastName:'Lofthouse'},  
{firstName:'Dona',lastName:'Tatman'},  
{firstName:'Clayton',lastName:'Clear'},  
{firstName:'Rosalinda',lastName:'Urman'},  
{firstName:'Cody',lastName:'Sayler'},  
{firstName:'Odessa',lastName:'Averitt'},  
{firstName:'Ted',lastName:'Poage'},  
{firstName:'Penelope',lastName:'Gayer'},  
{firstName:'Katy',lastName:'Bluford'},  
{firstName:'Kelly',lastName:'Mchargue'},  
{firstName:'Kathrine',lastName:'Gustavson'},  
{firstName:'Kelly',lastName:'Hartson'},  
{firstName:'Carlene',lastName:'Summitt'},  
{firstName:'Kathrine',lastName:'Vrabel'},  
{firstName:'Roxie',lastName:'Mcconn'},  
{firstName:'Margery',lastName:'Pullman'},  
{firstName:'Avis',lastName:'Bueche'},  
{firstName:'Esmeralda',lastName:'Katzer'},  
{firstName:'Tania',lastName:'Belmonte'},  
{firstName:'Malinda',lastName:'Kwak'},  
{firstName:'Tanisha',lastName:'Jobin'},  
{firstName:'Kelly',lastName:'Dziedzic'},  
{firstName:'Darren',lastName:'Devalle'},  
{firstName:'Julio',lastName:'Buchannon'},  
{firstName:'Darren',lastName:'Schreier'},  
{firstName:'Jamie',lastName:'Pollman'},  
{firstName:'Karina',lastName:'Pompey'},  
{firstName:'Hugh',lastName:'Snover'},  
{firstName:'Zebra',lastName:'Evilias'}  
]  
});  
newExt.TabPanel({  
fullscreen:true,  
ui:'dark',  
sortable:true,  
items:[{  
title:'Simple',  
layout:Ext.is.Phone?'fit':{  
type:'vbox',  
align:'center',  
pack:'center'  
},  
cls:'demo-list',  
items:[{  
width:Ext.is.Phone?undefined:300,  
height:500,  
xtype:'list',  
store:ListStore,  
itemTpl:'  
{firstName}{lastName}  
'  
}]  
},{  
title:'Grouped',  
layout:Ext.is.Phone?'fit':{  
type:'vbox',  
align:'center',  
pack:'center'  
},  
cls:'demo-list',  
items:[{  
width:Ext.is.Phone?undefined:300,  
height:500,  
xtype:'list',  
store:ListStore,  
itemTpl:'  
{firstName}{lastName}  
',  
grouped:true,  
indexBar:true  
}]  
},{  
title:'Disclosure',  
layout:Ext.is.Phone?'fit':{  
type:'vbox',  
align:'center',  
pack:'center'  
},  
cls:'demo-list',  
items:[{  
width:Ext.is.Phone?undefined:300,  
height:Ext.is.Phone?undefined:500,  
xtype:'list',  
onItemDisclosure:function(record,btn,index){  
Ext.Msg.alert('Tap','Disclosemoreinfofor'+record.get('firstName'),Ext.emptyFn);  
},  
store:ListStore,//getRange(0,9),  
itemTpl:'  
{firstName}{lastName}  
'  
}]  
}]  
});  
}  
}); 

小结：浅谈Sencha Touch中列表案例实现的内容介绍完了，希望通过本文的学习能对你有所帮助！