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

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

newExt.Application({  
launch:function(){  
newExt.TabPanel({  
fullscreen:true,  
ui:'dark',  
sortable:true,  
defaults:{  
cls:'cardcard3'  
},  
items:[{  
iconCls:'bookmarks',  
title:'Bookmarks',  
html:'Bothtoolbarsandtabbarshavebuilt-in,readytouseicons.Stylingcustomiconsisnohassle.  
Ifyoucan’tseeallofthebuttonsbelow,tryscrollingleft/right.  
，  
},{  
iconCls:'download',  
title:'Download',  
html:'PressedDownload'  
},{  
iconCls:'favorites',  
title:'Favorites',  
html:'PressedFavorites'  
},{  
iconCls:'info',  
title:'Info',  
html:'PressedInfo'  
},{  
iconCls:'more',  
title:'More',  
html:'PressedMore'  
},{  
iconCls:'search',  
title:'Search',  
html:'PressedSearch'  
},{  
iconCls:'settings',  
title:'Settings',  
html:'PressedSettings'  
},{  
iconCls:'team',  
title:'Team',  
html:'PressedTeam'  
},{  
iconCls:'time',  
title:'Time',  
html:'PressedTime'  
},{  
iconCls:'user',  
title:'User',  
html:'PressedUser'  
}],  
dockedItems:[{  
xtype:'toolbar',  
ui:'light',  
dock:'top',  
defaults:{  
iconMask:true,  
ui:'plain'  
},  
scroll:{  
direction:'horizontal',  
useIndicators:false  
 
},  
layout:{  
items:[{  
iconCls:'action'  
},{  
iconCls:'add'  
},{  
iconCls:'arrow_up'  
},{  
iconCls:'arrow_right'  
},{  
iconCls:'arrow_down'  
},{  
iconCls:'arrow_left'  
},{  
iconCls:'compose'  
},{  
iconCls:'delete'  
},{  
iconCls:'refresh'  
},{  
iconCls:'reply'  
},{  
iconCls:'search'  
},{  
iconCls:'star'  
},{  
iconCls:'home'  
},{  
iconCls:'locate'  
},{  
iconCls:'maps'  
},{  
iconCls:'trash'  
}]  
}],  
tabBar:{  
dock:'bottom',  
scroll:{  
direction:'horizontal',  
useIndicators:false  
},  
layout:{  
pack:'center'  
}  
}  
});  
}  
}); 

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