1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    nalgo01 is on a distinguished road

      0  

    Default How to add styles to Textbutton/SplitButton ?

    How to add styles to Textbutton/SplitButton ?


    Hi Geeks,

    As part of my feature i need to customize the TextButton/SplitButton using adding styles. I tried searching this, but couldn't find any .

    I found a post in Gxt 2.X where it tell about adding styles to a "Button". I tried to use the same for TextButton/SplitButton, but no luck. Below is the css file i used...

    .button-link .x-btn-text {
    cursor: pointer !important;
    cursor: hand !important;
    border: none !important;
    /* Disable the button-style */
    background-color: transparent !important;
    background:none !important;
    background-image:none !important;
    padding: 0px !important;
    color: #4784C3 !important;
    text-decoration: underline !important;


    }


    /* remove images */

    .button-link {
    font-size: 22px;
    }


    /* remove little dots in FF */


    .button-link .x-btn-tl i,
    .button-link .x-btn-tr i,
    .button-link .x-btn-tc i,
    .button-link .x-btn-ml i,
    .button-link .x-btn-mr i,
    .button-link .x-btn-mc i,
    .button-link .x-btn-bl i,
    .button-link .x-btn-br i,
    .button-link .x-btn-bc i {
    font-size: 0px;
    }

    Can some one let me know on how to customeize TextButton/SplitButton using styles?

    Thanks in Advance,
    gopi

  2. #2
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    139
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    I asked the same question some time ago (I just wanted to have bigger text on a button) and got no answers...
    My current understanding is that we have to use GWT 2.4 Appearance and Cells to change the look of components. I haven't had time to investigate more the topic...

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    cristi.tetic is on a distinguished road

      0  

    Default


    Hi,

    TextButton testButton = new TextButton("Test");
    testButton .addStyleName("btn_test");

    and then add in you css:

    .btn_test button{
    font-size: 11px;
    padding:2px;
    }

  4. #4
    Sencha User
    Join Date
    Mar 2013
    Posts
    15
    Vote Rating
    0
    shashank_a is on a distinguished road

      0  

    Default


    Hi Cristi,
    I think by using the CSS that you have specified above we can only change the font colour and text. What if I want to change the background colour of the button itself.

    I tried using background-color property in a css file and added that style name to text button instance.
    From that I came to know that some static image or some layer is being placed between the text displayed on the button and the background colour where it is getting applied..

    If my observation is right, then is their a way to change the background colour of a text button?

    Can any one provide me some heads up or some information in customizing the themes in GXT 3.0
    Customizing means how can use only colours to the component background instead of maintaining static images with states(Select state, over state, Inactive state etc)
    Thanks in advance.

  5. #5
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    Before I say anything, I would strongly suggest evaluating the need to modify the styles and or themes. I.e., is it something you can live with for now? That said...

    A theme creation tool is on the roadmap but is not available yet. As you touch upon, the problem is that there are a lot of images that are used and they would need to be regenerated for any new theme.

    In this case, the background of a TextButton is a gradient image and merely swapping it out will not be sufficient since all the other CSS colors match that gradient.

    Additionally, take a look at the DOM structure of a TextButton. You'll note that it's not an <input type="button"/> but rather a complicated structure containing nested tables. Applying a style to the TextButton applies it at the top most DOM element and is overridden by other styles further down this DOM tree. This is why your CSS is not having any effect.

    Assuming your button only contains text (i.e., no splitter or icon) the <div> inside the second <td> inside the second <tr> inside the first <table> is where the background image is applied - some 6 descendants down from the top most <div> where your style is applied.

    If you are feeling adventurous, you can extend and muck around with ButtonCellDefaultAppearance, construct a TextButtonCell with your new appearance, and then construct a TextButton with your new cell.

    There are also ways to selectively hijack appearance CSS files. Here's an example using grids: http://www.sencha.com/forum/showthread.php?250743. I think you'll want to do this to ButtonCell.css.