如何在 Sencha Touch tabBar 中使用附加图标？

Posted 2023-02-26

【中文标题】如何在 Sencha Touch tabBar 中使用附加图标？

【英文标题】：How to use additional icons in Sencha Touch tabBar?

【发布时间】：2012-02-13 22:55:24

【问题描述】：

使用 Sencha Touch，我想在页脚导航中使用目录 resources/themes/images/default/pictos/ 中的一些图标作为 iconCls。但从我读到的内容来看，它说我需要在 Rails 服务器上设置一个 ruby​​ 来编译正确的样式表和 javascript 文件以使用它们？

我对如何设置自己的服务器或设置自己的 RoR 服务器一无所知。还有其他方法可以做到这一点吗？我只想要该目录中的 3 个图标...设置整个服务器似乎有点矫枉过正。

【参考方案1】：

是的，您需要安装 Ruby 和 RubyGems（仅当您使用 Windows 时，因为它们已预先捆绑在 Mac 上）

然后您只需要在 touch/resources/sass 中打开正确的 scss 文件（取决于您使用的是什么）并添加以下行：

@include pictos-iconmask(PICTOS_NAME);

最后，您需要在该文件夹中打开一个终端并执行以下命令：

compass compile // Run it every time you change something in the .scss

或

compass watch // Will automatically recompile every time you save

More information about Sencha-Touch Theming here

【参考方案2】：

我使用了以下 CSS

/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv-webkit-mask-image:url(/resources/themes/images/default/pictos/TV.png)

实际上...老实说，我没有将我的 CSS 映射到图像，而是将图像转换为 Base64 并将其嵌入到 CSS 中。这样做的原因是我只需要其中的 4 个图标，而且我不想每次都移动它们。

/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFmUlEQVRoBe2aX6hURRzH75p/qCjLMLKk7CoZEgmikHjLSxbqWz30B6SXzF6ieujPg0FFfzB66KUSfO4hJAqKKDSp25USi6hESCoKUyr6Z4lalnn7fJadbTxnz+7Zc3fv3T34gw8zZ87Mb+Y7c87MnNmtjI2NDbRrlUplJmVugfNhKxzAT/uOKJjXqLNC3rlwOxyCV6nSsD2zne1CDY/A76DIj2AIzmjXT978+q7VMUponYfhybzl43xTKFjE5lNoeq3gMsLNsJRBKOqv5iod1HwurtVxbS3HVMKL07lzpMTq88ZxuwI+hRNgj8t+WAfT8vpplU9f4CP8DYR6rNO6V7Qq3+h+249zcEKFy2EX/AuhMb8S3wAzQr6ioT7ADtRn8H+S+GewvLDfogUthw3CCMQjfZTrTTCrqG/KOhnq4wgEsdYxAvOL+q22eTyFqw4GBhbQiNfgHwiN+5P4Fpjdrn/KzILn4S8I/vT9Bixo118yf+FHOnZEQ84CJ67jEBpp+DpcEudtFifvXLDzYh/61PfMZmXz3uuIYCvDHJlH4RjEDd7JdcvHkDy+HtsTZX1SnoHCr0eyIzomuCbaWfU++A1i0a7VVyYrD9fcWwi7E2Vc5++HcU+AoZ5qG+OLTsVp5M3gUuKsGoTvMz1ZB2lrYW+UzzKWvQs6tsSFejs6wsGpIbYGvoZY9Hdc3xDyEV8JpoVOMa/r+eqQp9Nh1wTXRF9N4z+MBCnsF3gYHoIfIYg13AVLOi0y9tdVwTXRVyBC0fFIOxlJEOu9z2Fh3LhuxCu1Rg2wZz2TCt2j+lXSSVPMHHgBboSkf0W/A/fC9zAFOmn6P4FOO3hgKkKnEw6DjXEd7HSFuKzuxAwV75dPbKZpj4Ed3mnT/wF0voXoEZ3fCgchPF5lDb9C4xpHcwiKfWpRsI9skLauVXA33tte7Ae1TsvzzpzogdbnaWeuZjZz9AUetsFP4HudnF1JmhCz7nNhNSwZb41Zgj/GsZuDUWa2MIuOt67C5Zlh7ewt8BzcBD6ehSyr4Jt429sLYlVFOxzlg+Bafhhic0D2w+OwEq6BjeD+PGVZI/wlOY+kck9ugqJtk0dKwRTrq3c37KZfqvd4ID7h+l14Cq6H+sDWIyTG5q4kdhzfm8x4sr3uyxW1K4i1ccSdaD3oexYcvLolHdRv9EHEY5898AECHf1TjKS/SXD0345v9LNgR/EH8Owry7znQULd+lmw889cOLuuJh3xrM08detnwR4nLYbhupoowsTl15/r9qoo+f/ZK07so/hM2vog4objNnM9g+ulsB4G43tZy1Kcp5fjfmougq2I3E64E1xhroNVcDmcYv0uWDHuwi6EdeDhocupW9GGVgbBQZjCm01g1XxlEuzy4yN9HIbgIkhZP8/SsZg/uNgMfljcAU/DIUhZGQS7y/oZXmZ3dRLcbLwP+yBlZRDsu3seDDNTeyjpzD0P5kPKyvIOX4CyjTAPPLC4E5y5U1YWwY7yHHggpTCRUIZHOiGp+eVpwc37p//vnh7h/h/D5grKMksfQ+YO8GdZ12G3lf4XNLW9LINgd1r+sL4J/J+IS9RV4PdwKQWjq/oz7FG2lYofY7fl8a2krEyTliPb0sokuKVYM5RJcOpsulEPZAnOVbiRw0lKU0dyAm74iCczhfZ66pfVGSHPZISeVyUHQ2GzYT2T1SuEYZa+lHjKsgRfRk4PsT0u6RVTiMeyjdp8Dun31CDItqxRvI0ii+ixrPvZHrt3x5PIDaC4wtaot3Tmov0ivIRo/zDmSDd8J0jvtlnvIKyHZeBOqrBlCdahP2O4Y2m4gJthAk3RzdqauymtnNib4+rR3C2ZoIy+oz6uvfjjd6e7QI3HFTwK/sex7HYAgTt8XL8FBftl4Ulfq8ecLH1lfjq+B0/Atv8AOeLFDQ1OlmYAAAAASUVORK5CYII=);

现在，当您创建 TabPanel 时，您希望按照这些思路做一些事情。

    Ext.create('Ext.TabPanel', 
        fullscreen: true,
        tabBar: 
            docked: 'bottom',
            layout: 
                pack: 'center'
            
        ,
        items: [
            title: 'Video',
            iconCls: 'tv' // the icon class string is appended to the CSS 
                          // '.x-icon-mask.[iconCls string]' 
                          // in this case 
                          // '.x-icon-mask.tv'
                          // as seen in the CSS above
        ]
    );

---

编辑

查看我的旧 Sencha Touch V1 代码库（根据您在下面的评论），您将希望对 Sencha Touch V1 使用以下 CSS

/* TV icon for Videos */
/* USED IN SENCHA TOUCH V1*/
.x-tab img.tv,.x-button img.x-icon-mask.tv-webkit-mask-image:url('/resources/themes/images/default/pictos/TV.png');

【讨论】：

谢谢你，你写的那一行css对我不起作用，可能是因为我使用了不同版本的sencha touch。然而，在浏览了 css 文件之后，我复制了一个相关的 CSS 规则并做了这个.x-tab img.tv,.x-button img.x-icon-mask.tv -webkit-mask-image:url(resources/themes/images/default/pictos/tv.png)。所以我使用了你的想法，但需要稍微改变一下css选择器。

是的，可能是这样。我通过查看现有的 CSS 找到了答案。我目前正在使用 ST2 Beta2

推荐使用指南针。见TDeBailleul's answer