PDA

View Full Version : remove/change X button from StoreFilterField



alberta
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 :)

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

Isquierdo
20 Nov 2014, 4:06 AM
Hi,

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

Isquierdo
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>
<container:child layoutData="{hLayoutData}">
<g:Image ui:field="btnClear" styleName="{style.clearImg}"/>
</container:child>
<container:child layoutData="{hLayoutData}">
<g:Image ui:field="btnSearch" styleName="{style.searchImg}"/>
</container:child>
</container:HorizontalLayoutContainer>

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:

@UiField
HorizontalLayoutContainer container;

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

@UiField(provided = true)
Image btnSearch;

@UiField(provided = true)
Image btnClear;

private TreeStore<BaseTreeGridDTO> gridStore;

//Constructor
public CustomSearchTextFilterField(TreeStore<BaseTreeGridDTO> gridStore) {
btnClear = new Image((AppClientBundle.INSTANCE.clearText()));
btnSearch = new Image(AppClientBundle.INSTANCE.magnifyGlass());
this.gridStore = gridStore;
buildSearchFilterField();
initWidget(uiBinder.createAndBindUi(this));
}

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) {
if(item.getName().toLowerCase().contains(searchFilterField.getText().toLowerCase()))
return true;
return false;
}
};
//Attaches the component that will be filtered
searchFilterField.bind(gridStore);
//Hides the clear button of the component
searchFilterField.setHideTrigger(true); <----------------------------------------------------------------------------
}

@UiHandler("btnClear")
public void onClickClearImg(ClickEvent event) {
this.searchFilterField.clear();
this.searchFilterField.focus();
}

@UiHandler("btnSearch")
public void onClickSearchImg(ClickEvent event){
this.searchFilterField.focus();
}


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


Rafael Isquierdo