Icon for sencha touch tabpanel tabs

Question

I have a tabpanel in sencha touch that looks something that below

Mobile.RootViewport = new Ext.TabPanel({
    fullscreen:'true',
    layout: 'card',
    tabBarDock: 'bottom',
    items: [Mobile.HomeViewport, Mobile.AboutViewport]
})

How do i have a icon for each of the tabs?

Answer 1

You need to add an iconCls property to each of the items within your TabPanel (HomeViewport, AboutViewport, etc).

There are a handfull of icons compiled into the default theme, but there are many more in the pictos directory (found at $touch/resources/themes/images/default/pictos/). The iconCls name will be the same as the filename without the .png.

If you try and use an image that is not in the default theme you will just get a blank square, but you can add more by editing the theme's .scss file and adding line to include the image like:

@include pictos-iconmask('refresh5');  // includes pictos/refresh5.png

For help changing the theme see An introduction to Theming Sencha Touch