View Full Version : remove/change X button from StoreFilterField

9 Jul 2009, 6:00 PM
hi, I would ultimatele like to replace 'X' (clear button) in the StoreFilterField with "Clear"
but could not find a way. Or if it is possible to remove the 'X button' and add "Clear" button next to the filter field would also work.

any help is greatly appreciated :)

10 Aug 2009, 4:55 PM
I had to override few elements in css

20 Nov 2014, 4:06 AM

It would be really awesome if you could share your solution with us.

24 Nov 2014, 7:59 AM
Using GWT2.6 and GXT 3.1 my solution to replace the 'X' icon of the component was the following.

I have created a new class called 'CustomFilterField.java' along with its .ui.xml file which can be seen below.

<container:HorizontalLayoutContainer ui:field="container" borders="false" width="286px" height="24px" styleName="{style.background}">
<container:child layoutData="{hLayoutData}">
<filter:StoreFilterField ui:field="searchFilterField" width="300px"/>
<container:child layoutData="{hLayoutData}">
<g:Image ui:field="btnClear" styleName="{style.clearImg}"/>
<container:child layoutData="{hLayoutData}">
<g:Image ui:field="btnSearch" styleName="{style.searchImg}"/>

I've placed the 2 images in a specific spot of the screen using a .css as they were going to be over the 'X' originally created by the StoreFilterField component.
Now, see below the CustomFilterField.java implemetation code:

HorizontalLayoutContainer container;

@UiField(provided = true)
StoreFilterField<BaseTreeGridDTO> searchFilterField;

@UiField(provided = true)
Image btnSearch;

@UiField(provided = true)
Image btnClear;

private TreeStore<BaseTreeGridDTO> gridStore;

public CustomSearchTextFilterField(TreeStore<BaseTreeGridDTO> gridStore) {
btnClear = new Image((AppClientBundle.INSTANCE.clearText()));
btnSearch = new Image(AppClientBundle.INSTANCE.magnifyGlass());
this.gridStore = gridStore;

private void buildSearchFilterField() {
searchFilterField = new StoreFilterField<BaseTreeGridDTO>(){

@Override //Defines how the filter is applied to the list
protected boolean doSelect(Store<BaseTreeGridDTO> store,
BaseTreeGridDTO parent, BaseTreeGridDTO item, String filter) {
return true;
return false;
//Attaches the component that will be filtered
//Hides the clear button of the component
searchFilterField.setHideTrigger(true); <----------------------------------------------------------------------------

public void onClickClearImg(ClickEvent event) {

public void onClickSearchImg(ClickEvent event){

Once created my component classes I used it in the screen I actually needed the component on.

Rafael Isquierdo