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

发布于 2025-01-05 09:12:18 字数 268 浏览 2 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红衣飘飘貌似仙 2025-01-12 09:12:18

是的，您需要安装 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

有关 Sencha-Touch 主题的更多信息请点击此处

Yes, you need to install Ruby and RubyGems (only if you're on Windows because they are pre bundled on Mac)

Then you just need to open the right scss file in touch/resources/sass (depending on what them you're using) and to add the following line to it :

@include pictos-iconmask(PICTOS_NAME);

Finally you need to open a terminal in that folder and to execute the following command :

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

回复收藏 0 原文

邮友 2025-01-12 09:12:18

我使用了以下 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');}

I used the following 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)}

Actually... to be perfectly honest, I didn't map my CSS to the image, but rather converted the image to Base64 and embedded it in the CSS. The reason for this was that I only needed 4 of the icons and I didn't want to move them all around every time.

/* 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=);}

Now, when you're creating your TabPanel you want do do something along these lines.

    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
        }]
    });

EDIT

Looking over my old Sencha Touch V1 code base (as per your comment below) you will want to use the following CSS for Sencha Touch V1

/* 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');}

回复收藏 0 原文

~没有更多了~