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.
Related
I have written very basic GWT application where SmartGWt tabs render with label on both tabs.
Problem I am facing here is, when I put GWT based label in second tab and reload application, first tab renders SmartGWT based label but when i click on second tab to look GWT label, it doesn't appear and also I am surprised why first tab content is removed as It was appearing earlier before clicking on second tab.
Please have a look into below code.
package com.test.client;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class TestGWT implements EntryPoint
{
public void onModuleLoad()
{
TabSet tabSet = new TabSet();
tabSet.setWidth("400px");
Tab tab1 = new Tab("Tab1");
Canvas pane = new Canvas();
pane.addChild(new com.smartgwt.client.widgets.Label("test label"));
tab1.setPane(pane);
Tab tab2 = new Tab("Tab2");
Canvas pane2 = new Canvas();
pane2.addChild(new Label("test label2")); // I need to put GWT widget in SmartGWT tab but it does not render in this tab. Also, it removes contents from first tab
tab2.setPane(pane2);
tabSet.addTab(tab1);
tabSet.addTab(tab2);
RootPanel.get("testid").add(tabSet);
}
}
When I set second SmartGWT tab to appear first which has GWT widget then things are working fine.
I am using GWT-2.6.1
Please share your thoughts here!
Regards,
Shobhit
Although I agree on the cause of the problem being RootPanel.get("testid").add(tabSet), the solution is replacing that line with:
tabSet.show();
Keep in mind that in SmartGWT, you should add components to other components using add(). Trying to add components using their IDs is prone to errors.
Finally, keep in mind that Isomorphic discourages mixing SmartGWT's components with components from other libraries. While this is unavoidable sometimes, if you can avoid it in your application, you should, because this is a very common source for bugs. See my comments below for additional sources for these claims.
The problem is adding the TabSet to the RootPanel. So you receive an
A widget that has an existing parent widget may not be added to the detach list.
error.
Change RootPanel.get("testid").add(tabSet); to
tabSet.setHtmlElement((Element) Document.get().getElementById("testid"));
tabSet.draw();
and it will work fine.
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
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
Working with Google Web Toolkit (with Google Maps Extension) I got a little problem:
I want to insert a Google Map into a TabLayoutPanel. Without that TabLayoutPanel everything worked fine. But as soon as the Map is inside of a tab it behaves really strange (its not centered right, and "jumps" when you try to scroll.).
The same Problem is when using TabPanel instead of TabLayoutPanel.
extract from my code:
in the onModuleLoad - method of my EntryPoint class:
DockLayoutPanel mainPanel;
MainUITabs tabWidget = new MainUITabs();
mainPanel.add(tabWidget);
RootLayoutPanel.get().add(mainPanel);
the MainUITabsWiget looks about like that:
public class MainUITabs extends Composite {
public MainUITabs(){
TabLayoutPanel tabPanel = new TabLayoutPanel(10, Unit.PCT);
MapWidget googleMapsTab = buildMapWidget();
tabPanel.add(googleMapsTab, "Google Maps");
initWidget(tabPanel);
}
private MapWidget buildMapWidget() {
LatLng coord = LatLng.newInstance(51.509, 11.434);
final MapWidget map = new MapWidget(coord, 2);
map.setSize("600px", "300px");
map.setCenter(coord);
map.addControl(new LargeMapControl());
map.addOverlay(new Marker(coord));
return map;
}
}
Seems like the Map doesn't like to be inside a tab..does anyone have an idea where the problem could be?
Thanks.
Andy
The TabPanel docs say that "This widget will only work in quirks mode. If your application is in Standards Mode, use TabLayoutPanel instead."
So, if your page has a DOCTYPE and thus is in Standards Mode, that suggests you'll have problems.
I found that when using a TabPanel in Standards Mode, widgets on tabs after the first one (which aren't visible at first) don't always render correctly. A workaround was to render these elements when the tab is shown, by using SelectionHandler.onSelection, as noted in the docs for the deprecated method TabPanel#onTabSelected. But reading the bit I quoted above, that's probably asking for trouble and in Standards Mode you ought to use TabLayoutPanel instead.
At first glance this looks like a problem I had with integrating TinyMCE (a WYSIWYG editor) with GWT - generally, components like these don't like when the DOM changes - in this case, it happens when you switch tabs (in my case it was drag & drop).
IIRC, the solution was to remove the TinyMCE widget from the text field it wrapped around when it wasn't shown on the screen. In your case, you'd want to remove the MapWidget from tabPanel, while it's not shown. I'm not familiar enough with the Google Maps API to know if there's a designated method to do that, but you can try a simple tabPanel.remove(googleMapsTab);.
I have posted this question on the Ext-GWT forums, I am just hoping that someone here might have an answer for me!
I am struggling to do something I initially thought was simple but am beginning to believe is impossible...
I have got a "layout template" of sorts - simply consisting of a few GWT DockLayoutPanel's within each other and finally ending in LayoutPanels. GWT's LayoutPanel is designed to size the widget (or Composite) that's added to it to its full size and does so perfectly with pure GWT widgets.
The idea of my "layout template" is that I don't know the EXACT height and width of the very inner LayoutPanel's because I may set certain panels sizes (of the outer DockLayoutPanels) differently when instantiating this template. All I would like is to add a Grid component to one of the inner most LayoutPanels and have it size itself (height AND width) to fit as normal GWT widgets do (works perfectly with a GWT Label for instance).
I am VERY new to GXT (as in I started using it earlier today) and I do realize that GXT builds its Components differently to the way GWT builds its Widgets on the DOM.
Is there anyway to achieve the desired result? I have tried adding the grid to a ContentPanel with a Layout of FitLayout, I have tried AnchorLayout, I have tried adding the grid directly... Nothing seems to work... Any advice or even a push in the right direction would be greatly appreciated!
Thanks in advance!
Xandel
Just a note on this post and the direction I have taken. When I started my GWT project and I was learning the basics and reading through others posts and concerns and advice, the one bit of advice I overlooked initially was quite simple - when using the GWT framework use pure 100% GWT components only.
I initially ignored these fair warnings of fellow developers because in the age of open source tools, and open source projects, one develops the mind set of "Instead of building a tool which will give me certain functionality, let me rather see if someone else has done it already". This mindset speeds up development and almost standardizes projects and methods of implementation.
However, I have found over the last two months, that when working with GWT it is best to not follow this principle. Maybe because its not as widely spread as other frameworks, or demands a very certain type of coding style but non the less my search for a (simple, sortable, JSON loadable) grid component and (validating, neatly styled) form component has been nothing short of a nightmare.
This isn't because they don't exist. They do. I tried ext-gwt, gwt-ext, gwt-mosaic, and gwt-incubator. It is because many of the components break away from the very simple layout foundation that GWT provides (in other words, the panels that you place the widgets on mostly need to be the panels provided with the tools). This in turn makes mixing components and getting the desired result near impossible. Which in turn breaks away from the let-me-find-a-useful-component mindset.
Just an interesting and final point which I think might be worth mentioning. So due to my realisation of the above mentioned point, I set about to write my own grid and form components. Which I have completed and are working fine for me (obviously, because I wrote them , I don't suspect they will be useful to everybody else). But in the process of writing the grid component, and needing the columns to size and space themselves out automatically once drawn in their parent panel, I found that knowledge of the panels final width is not known until finally being drawn (this happens long after all your code executes). So ironically I set about building a set of panels that communicate to each other, from the parent panel (who ultimately NEEDS to have knowledge of its size) right down to the most inner panels so that when my grid component finally gets drawn, I can fire a method called onSizeKnown(int width, int height) and do whatever sizing is required.
After I completed this I could do nothing but laugh. Because it suddenly became clear to me why all the other GWT components out there require their own panels. I in essence had to do the same to get what I needed working.
So in short, if you are a newbie GWT developer like I was and are (is?) looking for cool stuff to make your project look awesome - this is my advice - if you are going to use an external framework such as some of the above mentioned - use ONLY that framework. Do not mix its components with other frameworks. Learn to love that framework, and build your project from the bottom up using their panels and design methods. If this scares you and makes you feel nervous and limited then do what I did and write your own using pure vanilla GWT components. You will save yourself A LOT of time in the long run by following this advice.
Xandel
This solution is for GXT 2.2.0 and GWT 2.0.4 *
While the original poster has since moved on I recently ran into this issue and thought I would post my solution in case anyone else stumbles on this.
There is no reason you can't add a GXT Grid directly to a GWT LayoutPanel. The problem is that the styling/positioning approach of the two libraries conflicts. Basically it boils down to the fact that the Grid is sized based on its parent's height attribute, which is not set meaning that the grid's body get assigned a height of 0 and the grid itself gets a height equal to that of the grid header (if present).
So the solution is to undo what GXT does once flow has passed back to GWT. Here is a template solution:
class MyGridWrapper extends Composite {
private LayoutPanel widget;
private Grid<?> grid;
public MyGridWrapper(Grid<? extends ModelData> grid) {
this.grid = grid;
widget = new LayoutPanel();
initWidget(widget);
widget.add(grid);
// Set the grid's vertical and horizontal constraints
// ... populate the rest of the panel
}
#Override
protected void onLoad() {
// onLoad is called after GXT is finished so we can do what we need to
// Redo what the LayoutPanel did originally
grid.el().setStyleAttribute("position", "absolute");
grid.el().setStyleAttribute("top", "0");
grid.el().setStyleAttribute("bottom", "0");
grid.el().setStyleAttribute("left", "0");
grid.el().setStyleAttribute("right", "0");
// Undo any height settings on the .x-grid3 element
El mainWrap = grid.el().firstChild();
assert mainWrap.hasStyleName("x-grid3") : "Wrong Element: " + mainWrap.getStyleName();
mainWrap.setStyleAttribute("height", "auto");
// Undo any height settings on the .x-grid3-scroller element
El scroller = grid.el().firstChild().firstChild().getChild(1); // FUN!
assert scroller.hasStyleName("x-grid3-scroller") : "Wrong Element: " + scroller.getStyleName();
scroller.setStyleAttribute("height", "auto");
}
}
The assertions are there to help protect against what is obviously very fragile code so beware that this is a GIANT, GIANT hack.
--
Just in case you're wondering where the GXT Grid's structure is defined, you can find it in a template file in the GXT JAR under com/extjs/gxt/ui/client/widget/grid/GridTemplates#master.html
Have a look at com.extjs.gxt.ui.client.widget.grid.GridView#renderUI() to get an idea of how the grid is built.