List of available iconCls masks in documentation?

[meyerovb]

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]

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]

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]

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]

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]

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]

Awesome! That hint to browse the resource folder was great! Much appreciated.

[nougaSencha]

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]

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]

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]

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

[Cortezston]

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


ohh this information is great..i am using it and will use it in future too..:)

[IbarCarty]

Thank you very much for the reply!! I'm going to try it right now... I'll see if it works.

[amackay11]

Look in folder touch\resources\themes\images\default\pictos for the complete list.