浅谈Sencha Touch中列表案例实现

移动开发
Sencha Touch中列表案例实现是本文要介绍的内容,主要是来了解Sencha Touch中列表的应用,具体内容的实现来看本文详解。

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

  1. newExt.Application({  
  2. launch:function(){  
  3. Ext.regModel('Contact',{  
  4. fields:['firstName','lastName']  
  5. });  
  6. ListStore=newExt.data.Store({  
  7. model:'Contact',  
  8. sorters:'firstName',  
  9. getGroupString:function(record){  
  10. returnrecord.get('firstName')[0];  
  11. },  
  12. data:[  
  13. {firstName:'Julio',lastName:'Benesh'},  
  14. {firstName:'Julio',lastName:'Minich'},  
  15. {firstName:'Tania',lastName:'Ricco'},  
  16. {firstName:'Odessa',lastName:'Steuck'},  
  17. {firstName:'Nelson',lastName:'Raber'},  
  18. {firstName:'Tyrone',lastName:'Scannell'},  
  19. {firstName:'Allan',lastName:'Disbrow'},  
  20. {firstName:'Cody',lastName:'Herrell'},  
  21. {firstName:'Julio',lastName:'Burgoyne'},  
  22. {firstName:'Jessie',lastName:'Boedeker'},  
  23. {firstName:'Allan',lastName:'Leyendecker'},  
  24. {firstName:'Javier',lastName:'Lockley'},  
  25. {firstName:'Guy',lastName:'Reasor'},  
  26. {firstName:'Jamie',lastName:'Brummer'},  
  27. {firstName:'Jessie',lastName:'Casa'},  
  28. {firstName:'Marcie',lastName:'Ricca'},  
  29. {firstName:'Gay',lastName:'Lamoureaux'},  
  30. {firstName:'Althea',lastName:'Sturtz'},  
  31. {firstName:'Kenya',lastName:'Morocco'},  
  32. {firstName:'Rae',lastName:'Pasquariello'},  
  33. {firstName:'Ted',lastName:'Abundis'},  
  34. {firstName:'Jessie',lastName:'Schacherer'},  
  35. {firstName:'Jamie',lastName:'Gleaves'},  
  36. {firstName:'Hillary',lastName:'Spiva'},  
  37. {firstName:'Elinor',lastName:'Rockefeller'},  
  38. {firstName:'Dona',lastName:'Clauss'},  
  39. {firstName:'Ashlee',lastName:'Kennerly'},  
  40. {firstName:'Alana',lastName:'Wiersma'},  
  41. {firstName:'Kelly',lastName:'Holdman'},  
  42. {firstName:'Mathew',lastName:'Lofthouse'},  
  43. {firstName:'Dona',lastName:'Tatman'},  
  44. {firstName:'Clayton',lastName:'Clear'},  
  45. {firstName:'Rosalinda',lastName:'Urman'},  
  46. {firstName:'Cody',lastName:'Sayler'},  
  47. {firstName:'Odessa',lastName:'Averitt'},  
  48. {firstName:'Ted',lastName:'Poage'},  
  49. {firstName:'Penelope',lastName:'Gayer'},  
  50. {firstName:'Katy',lastName:'Bluford'},  
  51. {firstName:'Kelly',lastName:'Mchargue'},  
  52. {firstName:'Kathrine',lastName:'Gustavson'},  
  53. {firstName:'Kelly',lastName:'Hartson'},  
  54. {firstName:'Carlene',lastName:'Summitt'},  
  55. {firstName:'Kathrine',lastName:'Vrabel'},  
  56. {firstName:'Roxie',lastName:'Mcconn'},  
  57. {firstName:'Margery',lastName:'Pullman'},  
  58. {firstName:'Avis',lastName:'Bueche'},  
  59. {firstName:'Esmeralda',lastName:'Katzer'},  
  60. {firstName:'Tania',lastName:'Belmonte'},  
  61. {firstName:'Malinda',lastName:'Kwak'},  
  62. {firstName:'Tanisha',lastName:'Jobin'},  
  63. {firstName:'Kelly',lastName:'Dziedzic'},  
  64. {firstName:'Darren',lastName:'Devalle'},  
  65. {firstName:'Julio',lastName:'Buchannon'},  
  66. {firstName:'Darren',lastName:'Schreier'},  
  67. {firstName:'Jamie',lastName:'Pollman'},  
  68. {firstName:'Karina',lastName:'Pompey'},  
  69. {firstName:'Hugh',lastName:'Snover'},  
  70. {firstName:'Zebra',lastName:'Evilias'}  
  71. ]  
  72. });  
  73. newExt.TabPanel({  
  74. fullscreen:true,  
  75. ui:'dark',  
  76. sortable:true,  
  77. items:[{  
  78. title:'Simple',  
  79. layout:Ext.is.Phone?'fit':{  
  80. type:'vbox',  
  81. align:'center',  
  82. pack:'center'  
  83. },  
  84. cls:'demo-list',  
  85. items:[{  
  86. width:Ext.is.Phone?undefined:300,  
  87. height:500,  
  88. xtype:'list',  
  89. store:ListStore,  
  90. itemTpl:'  
  91. {firstName}{lastName}  
  92. '  
  93. }]  
  94. },{  
  95. title:'Grouped',  
  96. layout:Ext.is.Phone?'fit':{  
  97. type:'vbox',  
  98. align:'center',  
  99. pack:'center'  
  100. },  
  101. cls:'demo-list',  
  102. items:[{  
  103. width:Ext.is.Phone?undefined:300,  
  104. height:500,  
  105. xtype:'list',  
  106. store:ListStore,  
  107. itemTpl:'  
  108. {firstName}{lastName}  
  109. ',  
  110. grouped:true,  
  111. indexBar:true  
  112. }]  
  113. },{  
  114. title:'Disclosure',  
  115. layout:Ext.is.Phone?'fit':{  
  116. type:'vbox',  
  117. align:'center',  
  118. pack:'center'  
  119. },  
  120. cls:'demo-list',  
  121. items:[{  
  122. width:Ext.is.Phone?undefined:300,  
  123. height:Ext.is.Phone?undefined:500,  
  124. xtype:'list',  
  125. onItemDisclosure:function(record,btn,index){  
  126. Ext.Msg.alert('Tap','Disclosemoreinfofor'+record.get('firstName'),Ext.emptyFn);  
  127. },  
  128. store:ListStore,//getRange(0,9),  
  129. itemTpl:'  
  130. {firstName}{lastName}  
  131. '  
  132. }]  
  133. }]  
  134. });  
  135. }  
  136. }); 

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

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-09-05 13:48:36

Sencha Touc图标

2011-09-05 12:49:59

Sencha Touc事件

2011-09-05 10:20:21

Sencha ToucAPP

2011-09-02 16:21:08

Sencha Touc自动生成工具

2011-09-05 10:27:02

Sencha Touc手机应用Android

2011-09-02 15:18:49

Sencha Touc

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-05 14:09:06

Sencha Touc函数

2011-09-02 15:12:29

PhoneGapSencha Touc

2011-07-26 09:46:53

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-10-26 10:12:53

Sencha Touc布局

2011-11-28 13:42:55

Sencha Touc组件选择器

2011-07-25 16:41:16

Sencha Touc

2011-09-05 10:39:03

Sencha Touc离线存储数据库

2011-09-05 11:23:26

EclipseSencha Touc框架

2012-03-08 22:31:28

Sencha Touc

2011-07-26 09:36:55

Sencha Touc
点赞
收藏

51CTO技术栈公众号