PDA

View Full Version : [Solved] Suggest box on Window.



vishesh
19 Feb 2009, 9:12 PM
I'm facing this really wierd problem with suggest box using extjs library.
What I'm trying to do is add a suggest box which have callback to search the database and return possible matches. Now when I add this suggest box on a window with mask tp the background the suggestions to the suggestbox goes behind the window and can not be seen below the suggestbox.
I can not use combobox because the call to the server needs to go only when user enters string in the box and the complete list it too big to be loaded in the combo box at the start.

Can someone please suggest me how this can be resolved?
Thanks in advance.
Vish.

mjlecomte
20 Feb 2009, 3:45 AM
suggest you post your current code, I can't follow what you're doing.

vishesh
20 Feb 2009, 6:07 AM
Well hope this explains what i'm trying to explain.
I have a suggest box:

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("Cat");
oracle.add("Dog");
oracle.add("Horse");
oracle.add("Canary");

SuggestBox box = new SuggestBox(oracle);

I need to add it to a window:
Window wd = new Window();
wd.setModal(true);
wd.setSize(200, 100);
wd.add(box);
wd.show();

Now when it is run the suggestbox shows up but when you try to type and lookup the suggesstions the suggestions doesnot show up because the window property hides the suggestions. The suggestion are actually behind the window wd.

Hope this explains what I'm facing and requesting.
Thanks.

soze
20 Feb 2009, 7:53 AM
Is your suggestion panel an item within the window? Otherwise, I could be overlooking this but your setModal to true could be preventing anything from displaying on top.

vishesh
20 Feb 2009, 10:24 AM
The suggestbox is added to the window as a widget. Kindly see the working code mentioned below. When you run it you will notice the suggestion for the word "c" gives the suggestions behind the window which is a problem if this suggestbox is a part of a form and is added with other elements in the window.
Thanks


package com.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.SuggestBox;
import com.gwtext.client.widgets.Window;


public class TestApp2 implements EntryPoint {
public void onModuleLoad() {

MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("Cat");
oracle.add("Dog");
oracle.add("Horse");
oracle.add("Canary");

SuggestBox box = new SuggestBox(oracle);

Window wd = new Window();
wd.setModal(true);
wd.setSize(200, 10);
wd.add(box);
wd.show();
}
}

vishesh
20 Feb 2009, 10:25 AM
Is your suggestion panel an item within the window? Otherwise, I could be overlooking this but your setModal to true could be preventing anything from displaying on top.

Even the setModal(false) does not allow to show the suggestions above the window.

mjlecomte
20 Feb 2009, 10:40 AM
should you be posting in the GWT forum?

r2k
20 Feb 2009, 10:43 AM
... and post your code in appropite tags ???

vishesh
20 Feb 2009, 10:54 AM
Since Window I'm using is Extjs's object so posted in this forum.

mjlecomte
20 Feb 2009, 11:00 AM
Well, you're not posting code for ExtJS.

vishesh
20 Feb 2009, 12:10 PM
I'm soo sorry I'm new to this form and also didnt take a tutorial to post comments or topic. Pardon me.
Also sorry to post the cost with wrong library. But I was also trying with Extjs library and that too was giving me the same problem.
But I solved the problem with the issue.
Let me tell what i did so it will help others:
Goal:
I needed a google suggestbox to be added to a extjs's window so that I can do ajax search while typing in the box.
Problem:
The problem i was having was the suggestions to the box use to appear behind the window popup.
Solutions:
The suggestbox's setPopupStyleName to be set as box.setPopupStyleName("sb-setPopup");
The css having:
.sb-setPopup{
background-color: white;
border: 4px darkblue solid;
padding-left: 2px;
padding-right: 2px;
position:absolute;
z-index: 12000;
}

The z-index: 12000; is the cache. any popup if needed above the extjs window will need the z-index: 12000 (thats my guess).
But it worked. Thanks all.