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

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