1. #11
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    86
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Quote Originally Posted by IbarCarty View Post
    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

  2. #12
    Sencha User
    Join Date
    Oct 2012
    Location
    Badalona-Barcelona
    Posts
    6
    Vote Rating
    0
    IbarCarty is on a distinguished road

      0  

    Default


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

  3. #13
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    89
    Vote Rating
    3
    amackay11 is on a distinguished road

      0  

    Default


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

  4. #14
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    8
    Kikketer will become famous soon enough

      1  

    Default


    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.

  5. #15
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    53
    Vote Rating
    2
    Drömbolaget is on a distinguished road

      0  

    Default


    I agree with you Kikketer, the case with iconCls for buttons is just a big fail on Sencha's part.I have created a separate mechanism for putting icons on buttons. Not using Senchas built in stuff, as it doesn't work.

  6. #16
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cypress, California
    Posts
    169
    Vote Rating
    43
    dougbieber will become famous soon enough dougbieber will become famous soon enough

      0  

    Default try these icons

    try these icons


    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

  7. #17
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    8
    Kikketer will become famous soon enough

      0  

    Default


    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:
    Code:
    // 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)

  8. #18
    Sencha User
    Join Date
    Apr 2014
    Location
    Bhubaneswar
    Posts
    3
    Vote Rating
    -1
    ADSR is an unknown quantity at this point

      -1  

    Default


    any suggestions for perfect iconcls for personnel messages box , 'cause i've used "compose" for making wall post.

  9. #19
    Sencha User
    Join Date
    May 2014
    Posts
    3
    Vote Rating
    0
    amethyst1402 is on a distinguished road

      0  

    Default


    Quote Originally Posted by AndreaCammarata View Post
    Hi danfrist and welcome.



    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/d...=Ext.Component



    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/forumdis...-and-Showcases

    Hope this helps.
    thank u, very useful for me

  10. #20
    Sencha User abcd_ca's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Vote Rating
    2
    abcd_ca is on a distinguished road

      0  

    Default Here's the list:

    Here's the list:


    This is current for Sencha Touch 2.3:

    http://druckit.wordpress.com/2013/04...g-iconography/

    Note that this lists the icon include with the named param (i.e. "action" or "pencil") and also shows the letter one needs to use as the content ("R" and "p" for action and pencil respectively).

    @sencha This really should be listed as a table in the docs in my opinion.

Similar Threads

  1. Behavior of masks
    By pcr in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Dec 2009, 7:10 AM
  2. Masks appear above Msgs in Safari?
    By sj137 in forum Ext 1.x: Bugs
    Replies: 0
    Last Post: 23 May 2008, 1:51 AM
  3. FR: Masks for Filters
    By mhat in forum Community Discussion
    Replies: 1
    Last Post: 15 Oct 2007, 3:37 PM

Thread Participants: 14