View Full Version : [CLOSED] Mulitple StoreFilterField result in overlap

18 Jun 2008, 8:50 AM
I'm adding more than one StoreFilterField in a toolbar, like so:

actionToolBar.add(new AdapterToolItem(storeFilterFieldOne));
actionToolBar.add(new SeparatorToolItem());
actionToolBar.add(new AdapterToolItem(storeFilterFieldTow));

But the "X" icon on the right side of the first filter (used for resetting the filter) overlapps on the second filter.

18 Jun 2008, 10:17 PM
It overlaps also when you place a TextToolItem as second component to the toolbar :(

20 Jun 2008, 8:46 AM
TriggerFields, including StoreFilterField, require a width be set. You can fix your code by simple setting the width of the first filter field:


I have changed the code for StoreFilterField to set a default width. The change is in SVN.

25 Jun 2008, 5:41 PM
Hi Darrell --

I'm experiencing this same behavior regarding hanging cancel, X, image to the right of the filter field. I'm coding with gxt-1.0-rc1b and see the issue with at least IE7 and FF3. I tried your setWidth fix but it has no effect.

Here's my code:

StoreFilterField<TreeModel> filterField = new StoreFilterField<TreeModel>() {
@Override protected boolean doSelect(Store store, TreeModel parent, TreeModel record, String property, String filter) {
// only match leaf nodes
if (!record.isLeaf()) {
return false;
String name = record.get("name");
name = name.toLowerCase();
if (name.startsWith(filter.toLowerCase())) {
return true;
return false;
filterField.setEmptyText("Filter images...");

ToolBar toolBar = new ToolBar();
toolBar.add(new AdapterToolItem(filterField));

VerticalPanel treePanel = new VerticalPanel();
...The result:

More ideas? Thanks!


25 Jun 2008, 6:54 PM
First, what you are trying to do looks exactly the same as the Explorer Demo. So take a look at NaviationView.

Second, without complete test code, it is hard for me to guess what is happening in your code. Why are you using a VerticalPanel? The screenshot does not show the bottom of the panel so I cannot be for sure if it is needed. Try your code without it just to test.

If you still have issues, post some code in this format (http://extjs.com/forum/showthread.php?t=33778), and I will try to take a look.

25 Jun 2008, 7:04 PM
First, what you are trying to do looks exactly the same as the Explorer Demo. So take a look at NaviationView.

Right, that's the effect I'm going for. It'd be great if the pretty source for that page was available somewhere... is it?


25 Jun 2008, 7:06 PM
Yes it is available in the package under samples/explorer/src.

25 Jun 2008, 8:32 PM
Figured it out. GWT's default css file defines margin-top: 20px; on all img elements which pushes the cancel button downward. I cleaned out the gwt defaults.

Thanks for your time.