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

时间:2013-01-02 12:05:41

标签: mobile extjs extjs4 sencha-touch sencha-touch-2

我是sencha touch的新手,想要有三个标签图标,即Home, Profile/User and Camerahome图标目前可见,但Profile/User未显示。如何在sencha touch中添加profile/usercamera的图标?

这是我的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('')
}
});

4 个答案:

答案 0 :(得分:2)

您可以在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的集成而被弃用。

答案 1 :(得分:2)

您需要使用pictos。在此之前,您需要安装Ruby,以及SassCompass。按照本教程添加新图标掩码:

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

答案 2 :(得分:0)

相机无法作为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个答案

答案 3 :(得分:0)

如果您想添加自定义图标(未在图标中列出)请使用此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',