GWT Suggestbox with Smartgwt - gwt

I am facing a problem that I can't see the drop down list of the GWT Suggestbox.
I am adding a GWT Suggestbox into SmartGWT's VLayout. Then I can see the textbox of the Suggestbox. But when I input some data, I can't see the suggestions provided.
Is this because I am using the SmartGWT VLayout? Could anyone tell me how to solve it? Thanks.
Sorry, the above question is not clear enough. What I mean is I add a SuggestBox into a layout with small height. Then I can see the the SuggestBox's TextBox part and part of the suggestion and the rest of the suggestion seems hide under other layout. Below is my code:
VLayout mainLayout = new VLayout();
mainLayout.setHeight100();
mainLayout.setWidth100();
MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("a");
oracle.add("aa");
oracle.add("aaa");
oracle.add("aaaa");
oracle.add("aaaaa");
oracle.add("aaaaaa");
oracle.add("aaaaaaa");
SuggestBox box = new SuggestBox(oracle, new TextBox());
VLayout suggestBoxLayout = new VLayout();
suggestBoxLayout.setHeight("10%");
suggestBoxLayout.addMember(box);
VLayout body = new VLayout();
body.setBackgroundColor("#3B5998");
body.setHeight("90%");
mainLayout.addMember(body);
mainLayout.addMember(suggestBoxLayout);
So when I enter a into the SuggestBox, I can only see a, aa, aaa and the rest suggestions are hide by the body.

This may be zIndex related, but there's no reason to use GWT's SuggestBox and run into problems like this. Use SmartGWT's ComboBoxItem. If you don't want a drop-down control to appear at the end of the text entry area, call setShowPickerIcon(false).

With the help from Alain, I add .gwt-SuggestBoxPopup {z-index: 1000000;} into my CSS. Then I solve the problem.

It would be easier with little bit of code.
Before stopping to mix Smartgwt with Gwt I integrated some code which was using GWt suggestBox and it was working....
(Why don't you use the Smartgwt selectitem it does the job?)
Regards
Alain

Related

My panel not showing in Smart GWT

I am trying to add a GXT panel to my smartGWT tab panel but it is not showing.i get this error.i have done this in another tab and it is working but in in my second tab. when i select the second tab i see blank page and in the console i have this error.
Uncaught JavaScript exception [uncaught exception: java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list] in , line 0
here is my code
VLayout formBtnFrm = new VLayout();
formBtnFrm.addMember(addEditForm);// addEditForm is DynamicForm
HLayout buttonLayout = new HLayout();
buttonLayout.setMembersMargin(10);
buttonLayout.setHeight(22);
buttonLayout.addMember(createUser);
buttonLayout.addMember(editUser);
buttonLayout.setLayoutAlign(Alignment.CENTER);
formBtnFrm.addMember(buttonLayout);
ContentPanel panel = new ContentPanel();
panel.setFrame(true);
panel.setCollapsible(false);
panel.setAnimCollapse(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setHeading("Registration Form");
panel.setLayout(new FitLayout());
panel.add(formBtnFrm);
panel.setSize(350, 250);
groupLayout.addMember(panel);
mainLayout.addMember(groupGrid);
mainLayout.addMember(groupLayout);
addMember(mainLayout);
As it is not recommended at all to mix (for example gwt and smartgwt) I guess it's same thing with Gxt widgets by expérience (with gwt mix) even if it happen to work you never know when you will have a crazy behavior..;
You can always mix GWT widgets with those of Smartgwt, but not Smartgwt and gxt. Chances are many that things might not workout as expected because these are on the same level, they are are all bulit on top of gwt. Meaning the two venders might not have concentrated on making their widgets feet into each other.

bugs about using DataGrid wrapped by StackLayoutPanel

I tried to use DataGrid and put it in the stacklayoutpanel.At the time when I provide the data for the ListDataProvider, the CellTable is not visible in the browser because it's on a non active tab (although it's visible in the DOM tree). After switching to the tab containing the CellTable there is no data in it. If the tab is active at time of data provisioning the table is filled correctly. Since I have made a column sortable, if I clicked the sorting, the data would be displayed correctly. I want the data to be displayed automatically when I click the other inative tab. This will not be the problem if I switch to use celltable.
I knew this was the bug in GWT and it is fixed in GWT 2.5 RC. But my boss does not want me to use GWT2.5RC yet. I have to workaround to fix this. I knew that someone said datagrid.redraw() could sort of fix it. I tired it, but the display is weird. For example, I have 10 rows in DataGrid, after selecting the 2nd tab, redraw() is called, the data is automatically displayed, but there is only like 10px of block displaying the data and the scroll bar. I have to scroll down to see other rows. There are lots of space in the bottom of the tab not being used. Could anyone tell me how to fix this? So did I use the wrong way to fix it?
is there anything else I can do to fix this problem.
Could anyone give me some tips please.
Thanks
Best Regards
I have been struggled with this thing for almost 3 days. Thanks for Papick G. Taboada and Thomas Broyer.
You guys' ideas are really helpful. Bascially either of your solution does not solve the problem. but after I combined both solutions, dang~ it worked!!.
So. the completed solution is that, add the selection handler on the non-active tab, then when the event is called, used datagrid.onResize() and then stackLayoutPanel.forcelayout(). This can solve my problem. I have also tried replacing datagrid.onResize() with datagrid.redraw(). It works as well.
I hope this can help other people who have the same problem before using GWT 2.5RC
I came across this problem with a DataGrid within and Panel that was in a StackPanelLayout. DataGrid implements RequiresResize, so I made the Panel that contained the DataGrid implement RequiresResize so it could call onResize() for the DataGrid.
in the Panel that contained the DataGrid
#Override
public void onResize()
{
dataGrid.onResize();
}
On the StackLayoutPanel
stackLayoutPanel.addSelectionHandler(new SelectionHandler<Integer>() {
// http://code.google.com/p/google-web-toolkit/issues/detail?id=6889
#Override
public void onSelection(SelectionEvent<Integer> event) {
Integer selectedItem = event.getSelectedItem();
StackLayoutPanel panel = (StackLayoutPanel) event.getSource();
Widget selectedWidget = panel.getWidget(selectedItem);
if (selectedWidget != null && selectedWidget instanceof RequiresResize)
{
((RequiresResize)selectedWidget).onResize();
}
}
});
I believe a more general answer would be that any container in a StackLayoutPanel that contains a widget that implements RequiresResize should also implement RequiresResize and pass it on.

SWT in eclipse version 4.1 add additional dialogs

I am very new to swt and im my example I am using the following code for the shell and the display:
final GridLayout layout = new GridLayout(2, false);
parent.setLayout(layout);
I am trying to open a new ,'panel' as it is called in java, I think in swt it is a new display/dialog? when a button is pressed in the opening shell? I have looked everywhere for an example and I tried so much and cannot get it to work.
Any ideas on what I would put into my Listener?
Thanks,
Ann.
The equivalent to JPanel is a Composite in SWT. You should consider to read http://www.eclipse.org/swt/snippets/ for examples.
You may also check out http://www.eclipse.org/recommenders/ which might be of help when learning SWT.

setAutoHeight() gxt

I am creating a ContentPanel with BorderLayouts in gxt.
Need to set auto width and height for panel. setAutowidth() works properly but setAutoHeight() doesn't.
So, what should I implement to make my ContentPanel autoHeighed?
You can use this
container.setHeight("auto");
It worked for me.
There is another option. You can also try this
container.setStyleAttribute("height","auto !important");
container.setStyleAttribute("overflow","visible !important");

Opening a new Window with a Widget in GWT

Before you start shooting me down i have checked for answers and i have googled till my fingers bled but i havent been able to find a simple, concise answer. So im asking again for all those that might have this problem.
Question: how to open a new window with a formpanel in side.
Context: i have an app that lists lots of items, i want someone to edit an entry, i want a new window to open so they can edit properties then hit save. A standard thing you find in a lot of applications.
Architecture:
I have one client module called UI, it has a dozen classes that draw widgets and fill a main area when selected from a menu. I have a single html page called UI.html which has the tag in the head. Thats it.
Options Ive Seen
Call Window.Open() but you need to define a html file. I dont have one. I can create an empty one but how do you inject a widget in to it ?
use jsni $wnd to create a new window and get a reference to it. But how do i inject a form panel into it ??
use a popuppanel. They look sucky - plus if opening a window through JS is quite simple i would expect it to be in gwt.
Maybe im miss understanding how to use GWT i dont know.
Any help would be appreciated
Thanks
The way i got this to work is as follows:
i wrote a jsni method to open a new window
public static native BodyElement getBodyElement() /*-{
var win = window.open("", "win", "width=940,height=400,status=1,resizeable=1,scrollbars=1"); // a window object
win.document.open("text/html", "replace");
i added a basic body to the new window and returned the body element
win.document.write("<HTML><HEAD>"+css1+css2+"</HEAD><BODY><div class=\"mainpanel\"><div style=\"width: 100%; height: 54px;\"><div id=\"mainbody\"class=\"mainbody\" style=\"width: 100%;\"></div></div></div></BODY></HTML>");
win.document.close();
win.focus();
return win.document.body;
}-*/;
i then called this method from my main java method
BodyElement bdElement = getBodyElement();
I then injected my panel which has lots of widgets into the returned body element
SystemConfiguration config = new SystemConfiguration(); bdElement.getOwnerDocument().getElementById("mainbody").appendChild(config.getElement());
I agree with Bogdan: Use a DialogBox.
If you can't, you Window.open() as you mentioned in option 1:
Create another GWT module, and form.html that will load it
Window.open("form.html?entry=54")
Have the form gwt module read from the URL, load the entry, allow it to be edited, and provide Save and Cancel buttons
Close the popup when Save or Cancel is clicked
Can't you just use a DialogBox?
Example