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的內容介紹完了，希望通過本文的學習能對你有所幫助！