浅谈Sencha Touch中图标icons案例实现

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

Sencha Touch图标icons案例实现是本文要介绍的内容,主要是来了解Sencha Touch图标icons的应用。这个例子同样是用tabpanel来展示的,不过加入了icons。对于sencha touch来说,有许多内置的图标,相比之前的例子,我们这里多了dockitems,tabbar。有了这两个属性,整个程序就是一个记事本的原型了。

  1. newExt.Application({  
  2. launch:function(){  
  3. newExt.TabPanel({  
  4. fullscreen:true,  
  5. ui:'dark',  
  6. sortable:true,  
  7. defaults:{  
  8. cls:'cardcard3'  
  9. },  
  10. items:[{  
  11. iconCls:'bookmarks',  
  12. title:'Bookmarks',  
  13. html:'Bothtoolbarsandtabbarshavebuilt-in,readytouseicons.Stylingcustomiconsisnohassle.  
  14. Ifyoucan’tseeallofthebuttonsbelow,tryscrollingleft/right.  
  15. ,  
  16. },{  
  17. iconCls:'download',  
  18. title:'Download',  
  19. html:'PressedDownload'  
  20. },{  
  21. iconCls:'favorites',  
  22. title:'Favorites',  
  23. html:'PressedFavorites'  
  24. },{  
  25. iconCls:'info',  
  26. title:'Info',  
  27. html:'PressedInfo'  
  28. },{  
  29. iconCls:'more',  
  30. title:'More',  
  31. html:'PressedMore'  
  32. },{  
  33. iconCls:'search',  
  34. title:'Search',  
  35. html:'PressedSearch'  
  36. },{  
  37. iconCls:'settings',  
  38. title:'Settings',  
  39. html:'PressedSettings'  
  40. },{  
  41. iconCls:'team',  
  42. title:'Team',  
  43. html:'PressedTeam'  
  44. },{  
  45. iconCls:'time',  
  46. title:'Time',  
  47. html:'PressedTime'  
  48. },{  
  49. iconCls:'user',  
  50. title:'User',  
  51. html:'PressedUser'  
  52. }],  
  53. dockedItems:[{  
  54. xtype:'toolbar',  
  55. ui:'light',  
  56. dock:'top',  
  57. defaults:{  
  58. iconMask:true,  
  59. ui:'plain'  
  60. },  
  61. scroll:{  
  62. direction:'horizontal',  
  63. useIndicators:false  
  64.  
  65. },  
  66. layout:{  
  67. items:[{  
  68. iconCls:'action'  
  69. },{  
  70. iconCls:'add'  
  71. },{  
  72. iconCls:'arrow_up'  
  73. },{  
  74. iconCls:'arrow_right'  
  75. },{  
  76. iconCls:'arrow_down'  
  77. },{  
  78. iconCls:'arrow_left'  
  79. },{  
  80. iconCls:'compose'  
  81. },{  
  82. iconCls:'delete'  
  83. },{  
  84. iconCls:'refresh'  
  85. },{  
  86. iconCls:'reply'  
  87. },{  
  88. iconCls:'search'  
  89. },{  
  90. iconCls:'star'  
  91. },{  
  92. iconCls:'home'  
  93. },{  
  94. iconCls:'locate'  
  95. },{  
  96. iconCls:'maps'  
  97. },{  
  98. iconCls:'trash'  
  99. }]  
  100. }],  
  101. tabBar:{  
  102. dock:'bottom',  
  103. scroll:{  
  104. direction:'horizontal',  
  105. useIndicators:false  
  106. },  
  107. layout:{  
  108. pack:'center'  
  109. }  
  110. }  
  111. });  
  112. }  
  113. }); 

小结:浅谈关于Sencha Touch图标icons的内容介绍完了,希望通过本文的学习能对你有所帮助!

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

2011-09-05 13:53:08

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自动生成工具

2012-05-01 20:57:26

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
点赞
收藏

51CTO技术栈公众号