2

I am new to sencha touch and want to have three tabs icons i.e. Home, Profile/User and Camera. The home icon is currently visible but Profile/User is not. How can I add icon of profile/user and camera to tab in sencha touch?

here is my code for 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

4 に答える 4

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」ミックスインは ST < 2.2.0.alpha でのみ機能することに注意してください。これは、このバージョンからPictos Fontの統合により非推奨になったためです。

于 2013-01-02T12:17:51.960 に答える
2

を活用する必要がありますpictos。Rubyその前に、と をインストールする必要がありSassますCompass。このチュートリアルに従って、新しいアイコン マスクを追加します。

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

于 2013-01-02T12:24:02.587 に答える
0

カメラはiconClsとして利用できません。次のアイコンがサポートされています（ここを参照）。

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てください

于 2013-01-02T12:30:10.877 に答える
0

カスタム アイコン (pictos にリストされていないもの) を追加する場合は、somename name の代わりにこの 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',
于 2013-01-03T04:59:58.480 に答える