PDA

View Full Version : List of available iconCls masks in documentation?



meyerovb
28 Jun 2010, 1:42 PM
Is there anywhere in the documentation I can see the list of available iconCls masks? Edit: I see them in the kitchen sink icons example, these won't be included in the documentation?

Also, 'mask' is not listed as a valid option for the ui config option in the button documentation (http://www.sencha.com/deploy/touch/docs/?class=Ext.Button). Am I looking in the wrong place?

danfrist
27 Jan 2011, 6:16 AM
I find there are several possible property values missing from documentation. I'd like to know what values I can use for things like iconCls, xtype, etc.

Has anyone found a more complete way of discovering what we can do with this framework? I find that the API documentation is only a hint...

AndreaCammarata
27 Jan 2011, 12:10 PM
Is there anywhere in the documentation I can see the list of available iconCls masks? Edit: I see them in the kitchen sink icons example, these won't be included in the documentation?

All the available icons are listed in the kitchen example, just as you already said.



Also, 'mask' is not listed as a valid option for the ui config option in the button documentation (http://www.sencha.com/deploy/touch/docs/?class=Ext.Button). Am I looking in the wrong place?

What do you mean with mask? I think you are making confusion with the iconMask property.
You can find additional information about this property in the button documentation.

Hope this helps.

AndreaCammarata
27 Jan 2011, 12:15 PM
Hi danfrist and welcome.


I find there are several possible property values missing from documentation. I'd like to know what values I can use for things like iconCls, xtype, etc.


All the icons are listed inside kitchen sink example.
About the xtypes: take a look at this API doc

http://dev.sencha.com/deploy/touch/docs/?class=Ext.Button?class=Ext.Component



Has anyone found a more complete way of discovering what we can do with this framework? I find that the API documentation is only a hint...

Wath we can do with this framework?
Almost everything with or without PhoneGap integration.
However take a look at the Examples and Showcase forum to see developers works

http://www.sencha.com/forum/forumdisplay.php?58-Sencha-Touch-Examples-and-Showcases

Hope this helps.

LuckyWolf19
5 Mar 2011, 10:14 AM
Here is the list for those who don't want to look it up. It would be nice if this would be in the documentation if it is not already.

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

existdissolve
5 Mar 2011, 5:49 PM
The icons that LuckyWolf19 listed are the ones that are available by default. There are, however, a *ton* more available to the default theme, if you're willing to add them in to a custom stylesheet via SASS. At first, it seems a bit daunting if you've never done it before, but if you're serious about customizing your Sencha theme, this is something you're probably going to be needing to get into anyway.

Here's a good article on how to do that: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch

And you can browse to the full collection of masks in your sencha installation--just browse to \resources\themes\images\default\pictos

LuckyWolf19
6 Mar 2011, 2:20 PM
Awesome! That hint to browse the resource folder was great! Much appreciated.

nougaSencha
29 May 2012, 9:17 AM
hi,
i want to like this interface
35713

so this is my code:


Ext.define('AppHotel.view.Home',{
extend:'Ext.Img',
extend: 'Ext.Panel',
xtype:'home',

config:{
title:'Home',
iconCls:'home',
layout:'fit',
scrollable:true,
styleHtmlCls:'homepage',


items:[
{
xtype: 'image',
src: 'http://localhost/AppHotel/resources/images/logo3.png',
height: 100,
width: 100,
docked:'top'
},
{
xtype : 'searchfield',
title: 'Search',
name :'searchfield',
docked:'top'
},
{
xtype: 'image',
src: 'http://localhost/AppHotel/resources/images/image.png',
fullscreenItemCls:'true',
height: 400,
width: 100,
docked:'top'
},
{
xtype: 'button',
text: 'Recommendations',
iconCls: 'favorites',
iconMask: true,
docked:'top'
},
{
xtype: 'button',
text: 'Browse Categories',
iconCls: 'action',
iconMask: true,
docked:'top'
},
{
xtype: 'button',
text: 'Post Buying Requests',
iconCls: 'compose',
iconMask: true,
docked:'top'
},


{
xtype:'titlebar',
title:'Sign in',
docked:'bottom'
}
]
}
});


but images didn't take all the width of the page, how can i do??
this is the result of my page it's too bad:
35714

andyjv
23 Oct 2012, 6:46 AM
All the available icons are listed in the kitchen example, just as you already said.

Hope this helps.

Worst answer ever. Sencha would be so much better off if the docs were just a wiki

IbarCarty
3 Dec 2012, 9:14 AM
Hi!
How can I get that Style (black & blue) in my application? I've just started in Sencha Touch 2.0 and my small application is still in that blue start predefined color. An answer would be great, thanks a lot!!

existdissolve
3 Dec 2012, 11:11 AM
Hi!
How can I get that Style (black & blue) in my application? I've just started in Sencha Touch 2.0 and my small application is still in that blue start predefined color. An answer would be great, thanks a lot!!

You could try adjusting the "ui" config on the components you want to be in different colors/themes. If there isn't a built in ui that fits your needs, you can always create new ui's for your components via SASS.

While basic theming is really pretty easy, there's a lot of complex stuff that you can do if you want to, so be sure to check out the resources for theming: http://docs.sencha.com/touch/2-1/#!/guide/theming

IbarCarty
4 Dec 2012, 2:32 AM
Thank you very much for the reply!! I'm going to try it right now... I'll see if it works.

amackay11
20 Jan 2013, 5:17 PM
Look in folder touch\resources\themes\images\default\pictos for the complete list.

Kikketer
25 Sep 2013, 8:42 AM
There are 11 icons in the kitchen sink. But on that same "icons" page of the kitchen sink it says:
"Sencha Touch comes with over 300 icons that can optionally be included in your app via Sass and Compass."

No further instruction. I guess I have to read the whole "theming" section to simply add one icon that isn't part of this 11.

Edit: Ok, so I've had to look through the SASS code and even had to dig down into the icon mixin! All I wanted to do was include the "info_plain" icon that is located in the images directory (described above). The guide is out of date, using "pictos-iconmask($name)". It has now changed to "icon($name)".

I placed @include icon("info_plain"); in my app.scss file and compiled. It gave me an error stating that the icon could not be found. Hmm, so I look into the icon mixin (something I shouldn't have to do, the documentation continues to fail).

The mixin basically translates the name you give into a character as part of the pictos font. It does not look, nor does it have anything to do with, the icons in that themes folder. So now I'm stuck with the images in that font, or am forced to use something else to import this png file that seems to be absolutely useless to be included in the themes folder.

The barrier for entry into Sencha is intense.

Drömbolaget
12 Mar 2014, 4:53 AM
I agree with you Kikketer, the case with iconCls for buttons is just a big fail on Sencha's part.

The button doc (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Button-cfg-iconCls) doesn't state the available icons or how to include more icons.
The kitchen sink button icon demo (http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/icons) states that 300+ icons are available, but you cannot include them, so it's just a blatant lie.
I have created a separate mechanism for putting icons on buttons. Not using Senchas built in stuff, as it doesn't work.

dougbieber
12 Mar 2014, 6:58 AM
It would be nice if Sencha included a group of icons that matched the theming. When I looked in the resources images directory I saw a lot of sprites. Not too useful unless you're looking at using SASS and writing your own widget.


In our case, we've found a reasonable set of 16x16 icons on the internet. The library has over 3,500 icons. Look here: http://p.yusukekamiyamane.com/

Yes, I know there are a dearth of icons on the internet but this one seemed the most consistent.


Hope this helps.


-Doug

Kikketer
12 Mar 2014, 7:55 AM
So after looking at the code: touch > resources > themes > stylesheets > sencha-touch > base > mixins > _class.scss
There's a segment of code for translating the icons into their respective code for the font file:


// Row 1
@if ($name == "anchor") { @return "a"; }
@else if ($name == "box") { @return "b"; }
@else if ($name == "upload") { @return "c"; }
....

So names are nice and all, but we still don't know what they look like. Also, note... you can't use these until you activate them with @icon(...)

Also there's only 103 icons listed in here (1/3 of what the kitchen sink states). They do have a comment with the pictos fonts link. http://pictos.cc/font/ Again there are not 300 fonts to pick from there.

Basically it comes down to roll your own when you need icons. The "built-in" fonts are nearly useless and difficult to see what they actually are. If you want icons, grab some from someplace (make sure they are fonts, like icomoon.io) Then roll your own.

Until Sencha documents the icons they have correctly, I wouldn't trust using it.

(Side note: Sencha - Why did you pick Pictos? There's hardly any good/useful icons in there. There's a serious lack of useful arrows or simple icons. Exit? < >? "multi-person"? I just really hope you are not paying too much for those)