Hybrid View

  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

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