Hybrid View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    GEqui is on a distinguished road

      0  

    Default TwinTriggerField change icon

    TwinTriggerField change icon


    Does anybody know how can I change the icon of the TwinTriggerField?

    Thanx

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    20
    Vote Rating
    0
    I_P is on a distinguished road

      0  

    Default


    Create a class in your css. For example:
    .x-form-trigger-field{
    background-image: url(../images/default/form/image.gif) !important;
    } and then call setTriggerStyle method for your trigger field like that: myTwinTriggerField.setTriggerStyle("x-form-trigger-field");

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    And how about on Gxt 3?

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    GEqui is on a distinguished road

      0  

    Default


    Thanx for the reply..

    I wanted to change the to a search icon which was already included in the css..

    So i just called setTwinTriggerStyle("x-form-search-trigger")

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    In response to micgala's question, this is slightly different in GXT 3 to account for the appearance pattern.

    If replacing a style, image, or template for every single instance, you'll need to make a new <replace-with> tag in your module to describe what is being replaced, and what it is being replaced with. If it is a one-off, it is probably easier to pass the appearance into the constructor of the field/cell.

    In the case of TwinTriggerField, use SpinnerField as a guide for how the styles, images can be replaced. If you want two icons, side by side (SpinnerField makes them over/under), it should just be a matter of a little css and an image or two, all packed into a client bundle and passed to the super constructor.

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Location
    Lima, Peru
    Posts
    43
    Vote Rating
    5
    poseidonjm is on a distinguished road

      0  

    Default


    I made some implementations for GXT3 that could be some help

    MyTwinTriggerFieldCell.java

    https://gist.github.com/4489127

    MyTwinTriggerFieldDefaultAppearance.java
    https://gist.github.com/4489139

    MyTwinTriggerField.java
    https://gist.github.com/4489165

    MyTwinTriggerField.css
    https://gist.github.com/4489354

    Search icons
    https://github.com/poseidonjm/GXT3-P...s.rar?raw=true

    add to GWT module

    Code:
    <replace-with class="com.rhem.client.widget.MyTwinTriggerFieldDefaultAppearance">
        <when-type-is class="com.rhem.client.widget.MyTwinTriggerFieldCell.MyTwinTriggerFieldAppearance" />
      </replace-with>
    Attached Images