Hybrid View

  1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    4
    Vote Rating
    0
    Duranne is on a distinguished road

      0  

    Default Ext.Button and background-image CSS

    Ext.Button and background-image CSS


    Hi,

    I would like to create my own tool bar, like the one there is in the Ext.form.HtmlEditor (the one with the "bold", "italic"... buttons).
    I manage to get an icon showing on these buttons by using the 'icon' property of the Ext.Button, but I do not manage to get the icon showing by using the 'iconCls' property

    My code looks like this :

    Code:
    var toolBar = new Ext.Toolbar({standard config options...});
    var buttonBold = new Ext.Button({    
                                    id : 'boldBtn',
                                    enableToggle : true,
                                    cls : 'x-btn-icon',
                                    iconCls:'boldBtn'
                                    //iconCls : 'x-edit-bold',
                                    tabIndex:-1
                                });
    toolBar.addButton(buttonBold);
    with the following CSS :

    Code:
    .boldBtn{
      background-image : url("bold.png");
    }

    And my button is not filled with the 'blod.png' picture...

    Am I doing something wrong?

    And it would be perfect if I can use the 'tb-sprite.gif' which is the piture used by the HtmlEditor...
    I looked the code of the HtmlEditor but I can't find what I am missing here to get it working.

    Thanks!
    Last edited by Duranne; 1 Oct 2010 at 6:10 AM. Reason: adds the CSS declaration

  2. #2
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    9
    troseberry will become famous soon enough

      0  

    Default


    try adding the "!important" to the end.
    HTML Code:
    .add{
     background-image: url(bold.png) !important;
    }

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    4
    Vote Rating
    0
    Duranne is on a distinguished road

      0  

    Default


    It seems to work! Nice one, thank you!

    And I just realized that I need to set my toolbar with
    cls:'x-html-editor-tb'
    in order to be able to use the same CSS as the html editor...

    Thanks again! You saved my afternoon!

  4. #4
    Ext User
    Join Date
    Sep 2010
    Posts
    4
    Vote Rating
    0
    Duranne is on a distinguished road

      0  

    Default [Solved] Reply to Thread

    [Solved] Reply to Thread


    It seems to work! Nice one, thank you!

    And I just realized that I need to set my toolbar with
    cls:'x-html-editor-tb'
    in order to be able to use the same CSS as the html editor...

    Thanks again! You saved my afternoon!

Similar Threads

  1. [FIXED-111] Home button image incorrect in ext-touch.css
    By nsjs in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 29 Jun 2010, 4:21 PM
  2. Replies: 2
    Last Post: 12 Apr 2009, 5:52 PM
  3. CSS background image from sprite - show on tree and panel
    By zombeerose in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 25 Aug 2008, 6:31 AM

Thread Participants: 1