1. #1
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    104
    Vote Rating
    6
    miroperez is on a distinguished road

      0  

    Default Creating new icon cls

    Creating new icon cls


    What are the steps to create new icons like the ones in the shipping css? I tried copying an existing one then made minor changes to one like this:

    HTML Code:
          .x-button-plain.x-button-mask img.play, .x-toolbar .x-button-plain.x-button-mask img.play,
          .x-button-plain.x-button-pressed.x-button-mask img.play, .x-toolbar .x-button-mask.x-button-mask img.play, .x-button-mask.x-button-mask img.play
           {
            -webkit-mask-box-image: url('next.png'); 
           }
    Am I missing something?

  2. #2
    Touch Premium Member
    Join Date
    Sep 2010
    Location
    Greenville, SC
    Posts
    1
    Vote Rating
    0
    elementsofway is on a distinguished road

      0  

    Default


    I'm guessing this thread is dead, but just in case anyone else stumbles upon it, here's an example of adding a custom icon to a tab panel...

    Add this to your CSS:

    Code:
    .x-tab img.callReport, .x-button img.x-icon-mask.callReport {
    	-webkit-mask-image:url('179-notepad.png'); 
    }

    Within your code, use:

    Code:
    {
    	title: 'Call Report',
    	html: 'Hello World!',
    	iconCls: 'callReport'
    },

  3. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi guys,
    if you want to make a great Sencha Touch mobile application, you don't have to edit Sencha Touch CSS, but use SASS and Compass to create your own theme.
    Take a look at this video to learn how.

    http://vimeo.com/17879651

    Hope this helps
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #4
    Sencha User
    Join Date
    May 2008
    Posts
    15
    Vote Rating
    0
    acidfilez is on a distinguished road

      0  

    Default using binary image file

    using binary image file


    1) Add this to your css:


    .x-tab img.import, .x-button img.x-icon-mask.import {
    -webkit-mask-image: url('data:image/png;base64,replace here .... binary');
    }

    2) transform the image to binary, online link
    http://www.greywyvern.com/code/php/binary2base64

    3) then you get the binary, and you replace it on the url.

    4) create the button on your sencha

    var importBtn = new Ext.Button({
    iconCls: 'import',
    iconMask: true,
    ui: 'plain',
    handler: function() {
    alert('Funciona Mierda');
    }
    });

    yes, import is your image button.

    enjoy

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    1
    Vote Rating
    0
    rocky1946 is on a distinguished road

      0  

    Default


    Tried the previous thread and it works with slight modifications

    1) Add this to your css:
    (since I use an iPad the apple.css is the css to modify)

    .x-tab img.import, .x-button img.x-icon-mask.import {
    -webkit-mask-image: url('data:image/png;base64,replace here .... binary');
    }
    the semi-colon after the closed-parenthesis is not needed

    2) transform the image to binary, online link
    http://www.greywyvern.com/code/php/binary2base64
    does what it says it does

    3) then you get the binary, and you replace it on the url.
    the code generated goes where the phrase replace here ....binary in step 1 is located
    be sure to leave the leading comma and the trailing single quote in place

    4) create the button on your sencha

    did not use the var importBtn = new Ext.Button
    var importBtn = new Ext.Button({
    iconCls: 'import',
    iconMask: true,
    ui: 'plain', used double quotes not single quotes to enclosed "plain"
    handler: function() {
    alert('Funciona Mierda');
    }
    });

    since I already had the function defined elsewhere, simply added the following
    to the items section where the buttons were to be displayed
    my image button was named zoom_in

    items : [{
    iconMask : true,
    ui : "plain",
    iconCls : 'zoom_in',
    handler : zoomIn
    . . . . . .


  6. #6
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Vote Rating
    4
    bastard is on a distinguished road

      0  

    Default new reference

    new reference


    Since this tread keeps popping up high on google for custom icons in Sencha, decided to include a reference link i found:

    http://www.senchatouchbits.com/9/add...ine-icons.html

  7. #7
    Sencha User wilzdezign's Avatar
    Join Date
    Jul 2011
    Location
    WA
    Posts
    65
    Vote Rating
    0
    wilzdezign is on a distinguished road

      0  

    Default


    adding semi-colon to end is optional (if it is the last statement in the CSS set). It is still preferred to show that the style attribute:value pair is done, and it is required if you have other CSS attribute:value pairs after it.

    For single quote or double quote, both will work for the 'ui' value, it doesn't matter

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    119
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    I followed the instructions perfectly but my iconCls is showing up as a blank grey box.

    I'm trying to use the sencha touch 'speedometer2' as the iconCls. The icon is already in pictos folder. But no matter what I do it doesnt work

    Help !

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Naga is on a distinguished road

      0  

    Default


    Hi,

    You just add it in your .html file

    Code:
    .sample {
      -webkit-mask-box-image: url('/public/images/sample.png');
    }

    and refer it in your button by

    Code:
    iconCls: 'sample ',
    it's working fine for me.

    Regards,
    Nag.

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Posts
    27
    Vote Rating
    0
    lpfx is on a distinguished road

      0  

    Default


    Quote Originally Posted by Sasha172 View Post
    I followed the instructions perfectly but my iconCls is showing up as a blank grey box.

    I'm trying to use the sencha touch 'speedometer2' as the iconCls. The icon is already in pictos folder. But no matter what I do it doesnt work

    Help !
    Sasha172, have you figured it out?

    I'm having the same problem.

    Can someone help me?

Similar Threads

  1. Button and Cls
    By umit in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 30 Mar 2010, 4:49 AM
  2. Creating a Menu When a Titlebar Icon is Pressed
    By mconnors1234 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 10 Jan 2008, 6:15 AM
  3. cls for panel
    By bhomass in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 23 Nov 2007, 2:09 PM

Thread Participants: 12

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi