我是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('')
}
});
答案 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
,以及Sass
和Compass
。按照本教程添加新图标掩码:
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',