Question

我是sencha touch的新手，想要有三个标签图标，即Home, Profile/User and Camera。 home图标目前可见，但Profile/User未显示。如何在sencha touch中添加profile/user和camera的图标？

这是我的Profile.js代码

Ext.define('find.view.Profile' , {
extend: 'Ext.Panel',
xtype: 'profile',

config: {
    title: 'Profile',
    iconCls: 'user',
    layout: 'fit',
    scrollable: true,
    styleHtmlContent: true,
    styleHtmlCls: 'profilepage',
    html: ['<h1>Profile</h1>'].join('')
}
});

Answer 1

您可以在ST应用中使用的所有图标都位于目录

中

resources/themes/images/default/pictos

但是，默认情况下，并非所有应用主题都包含在内。要包含这些额外的图标，您需要包含行

@include pictos-iconmask(<YOUR_ICON>);

在app.scss文件中，然后使用COMPASS编译主题。如果您对Sencha Touch不熟悉，我强烈建议您查看SenchaCon 2011中关于如何设置ST应用程序样式的视频。

http://docs.sencha.com/touch/2-1/#!/video/theming

PS：请注意，“pictos-iconmask”mixin仅适用于ST＆lt; 2.2.0.alpha因为从这个版本开始，由于Pictos Font的集成而被弃用。

Answer 2

您需要使用pictos。在此之前，您需要安装Ruby，以及Sass和Compass。按照本教程添加新图标掩码：

http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application

Answer 3

相机无法作为iconCls使用。支持以下图标（seen here）：

action
add
arrow_down
arrow_left
arrow_right
arrow_up
bookmarks
compose
delete
download
favorites
home
info
locate
maps
more
organize
refresh
reply
search
settings
star
team
time
trash
user

要设置自己的图标样式，请查看@Andrea Cammarata和@user1479606个答案

Answer 4

如果您想添加自定义图标（未在图标中列出）请使用此css代替某个名称名称使用您的名称作为图标

.x-tab .x-button-icon.somename,.x-button .x-button-icon.x-icon-mask.somename{-webkit-mask-image:url('path-to-image/facebook-icon.png')}

并将其用作

iconCls: 'somename',

用户或配置文件选项卡图标不可见

4 个答案: