sencha触摸tabpanel标签的图标 [英] Icon for sencha touch tabpanel tabs

问题描述

我在sencha触摸中有一个tabpanel，看起来像下面

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?

推荐答案

您需要向每个项目添加 iconCls 属性在您的TabPanel（HomeViewport，AboutViewport等）。

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

有一个handfull的图标编译成默认主题，但是有许多目录（位于 $ touch / resources / themes / images / default / pictos / ）中。 iconCls名称将与.png不同的文件名相同。

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.

如果您尝试使用不在默认主题中的图像，您将会获得空白正方形，但是您可以通过编辑主题的.scss文件和添加行来添加更多内容，例如：

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

有关更改主题的帮助，请参阅 Theming Sencha Touch的简介

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

这篇关于sencha触摸tabpanel标签的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！