PDA

View Full Version : TwinTriggerField change icon



GEqui
18 Jan 2012, 12:14 AM
Does anybody know how can I change the icon of the TwinTriggerField?

Thanx

I_P
18 Jan 2012, 6:05 AM
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");

micgala
20 Jan 2012, 1:45 AM
And how about on Gxt 3?

GEqui
23 Jan 2012, 4:33 AM
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")

Colin Alworth
23 Jan 2012, 3:37 PM
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.

poseidonjm
8 Jan 2013, 4:15 PM
I made some implementations for GXT3 that could be some help

MyTwinTriggerFieldCell.java
(https://gist.github.com/4489127)https://gist.github.com/4489127

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

(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-PHP/blob/master/war/search-icons.rar?raw=true

add to GWT module


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

Rob Ferguson
15 Mar 2013, 12:25 AM
Hi,

Take a look at this post re how to extend a TriggerField:

http://kiahu.com/wp-content/uploads/2013/03/Contact-General-tab-LookUpField.png

-> http://kiahu.com/tutorial/how-to-create-a-gxt-triggerfield-based-lookup-field/

Cheers
Rob

Kiahu.com