Can't add a EditorGrid inside a TabItem on GXT 2.0 M2

[edumrf]

I'm getting an error when adding a EditorGrid inside a TabItem.



package br.com.dyad.client;

import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.CheckColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.EditorGrid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.TableData;
import com.extjs.gxt.ui.client.widget.layout.TableLayout;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;

public class Test extends Window{
public Test() {
super();

// 1) Window config
this.setHeading( "Example" );
this.setLayout(new FitLayout());
this.setSize(500, 500);

// 3) Create a frame (FormPanel with TableLayout) and add to main panel
TableLayout tableLayout = new TableLayout();
tableLayout.setColumns(1);
FormPanel formFrame = new FormPanel();
formFrame.setLayout(tableLayout);

this.add( formFrame );

TableData col = new TableData();
col.setColspan(1);
col.setPadding(5);

formFrame.add( Test.getEditorGridExample(), col ); //here I can add this grid without problems.

// 5) Add a tab manager and a tab item in formFrame.

//tab manager
TabPanel tabs = new TabPanel();
tabs.setDeferredRender(false);
tabs.setWidth(400);

//a tab
TabItem tabItem = new TabItem();
tabItem.setText( "Tab Item 1" );
tabItem.setWidth(200);
tabItem.setHeight(200);

// a form inside the tab
TableLayout tableLayout2 = new TableLayout();
tableLayout2.setColumns(1);
FormPanel formFrameTab = new FormPanel();
formFrameTab.setLayout(tableLayout2);

TableData col2 = new TableData();
col.setColspan(1);
col.setPadding(5);

//formFrameTab.add( Test.getEditorGridExample(), col2 ); //here causes the PROBLEM! i cant add a editorgrid in formPanel inside a tabitem.

tabItem.add( formFrameTab );

// add the tabitem
tabs.add(tabItem);

// add the tab manager to formFrame
TableData column2 = new TableData();
col.setColspan(1);

formFrame.add(tabs, col);
}



//Just a method that returns a EditorGrid used in this example.
public static EditorGrid<ModelData> getEditorGridExample(){
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Common Name");
column.setWidth(220);

TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
column.setEditor(new CellEditor(text));
configs.add(column);

final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setForceSelection(true);
combo.setTriggerAction(TriggerAction.ALL);
combo.add("Shade");
combo.add("Mostly Shady");
combo.add("Sun or Shade");
combo.add("Mostly Sunny");
combo.add("Sunny");

column = new ColumnConfig();
column.setId("light");
column.setHeader("Light");
column.setWidth(130);
//column.setEditor(editor);
configs.add(column);

column = new ColumnConfig();
column.setId("price");
column.setHeader("Price");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(70);
column.setNumberFormat(NumberFormat.getCurrencyFormat());
column.setEditor(new CellEditor(new NumberField()));

configs.add(column);

DateField dateField = new DateField();
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

column = new ColumnConfig();
column.setId("available");
column.setHeader("Available");
column.setWidth(95);
column.setEditor(new CellEditor(dateField));
column.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());
configs.add(column);

CheckColumnConfig checkColumn = new CheckColumnConfig("indoor", "Indoor?", 55);
CellEditor checkBoxEditor = new CellEditor(new CheckBox());
checkColumn.setEditor(checkBoxEditor);
configs.add(checkColumn);

final ListStore<ModelData> store = new ListStore<ModelData>();

ColumnModel cm = new ColumnModel(configs);


final EditorGrid<ModelData> grid = new EditorGrid<ModelData>(store, cm);
grid.setBorders(true);
grid.addPlugin(checkColumn);

return grid;
}
}


Error generated:


[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (Error): Unknown runtime error
number: -2146827687
description: Unknown runtime error
at com.google.gwt.dom.client.Element$.setInnerHTML$(Native Method)
at com.extjs.gxt.ui.client.widget.grid.GridView.renderUI(GridView.java:1476)
at com.extjs.gxt.ui.client.widget.grid.GridView.render(GridView.java:1423)
at com.extjs.gxt.ui.client.widget.grid.Grid.afterRender(Grid.java:532)
at com.extjs.gxt.ui.client.widget.Component.render(Component.java:949)
at com.extjs.gxt.ui.client.widget.Component.render(Component.java:857)
at com.extjs.gxt.ui.client.widget.layout.TableLayout.renderComponent(TableLayout.java:403)
at com.extjs.gxt.ui.client.widget.Layout.renderAll(Layout.java:247)
at com.extjs.gxt.ui.client.widget.layout.TableLayout.onLayout(TableLayout.java:394)
at com.extjs.gxt.ui.client.widget.Layout.layout(Layout.java:96)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:348)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:364)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:364)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:368)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:364)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:427)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:236)
at com.extjs.gxt.ui.client.widget.Window.layout(Window.java:488)
at com.extjs.gxt.ui.client.widget.Window.afterShow(Window.java:818)
at com.extjs.gxt.ui.client.widget.Window.show(Window.java:790)
at br.com.dyad.client.DesktopMenu$2.componentSelected(DesktopMenu.java:326)
at br.com.dyad.client.DesktopMenu$2.componentSelected(DesktopMenu.java:1)
at com.extjs.gxt.ui.client.event.SelectionListener.handleEvent(SelectionListener.java:20)
at com.extjs.gxt.ui.client.event.SelectionListener.handleEvent(SelectionListener.java:1)
at com.extjs.gxt.ui.client.event.BaseObservable.callListener(BaseObservable.java:176)
at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:96)
at com.extjs.gxt.ui.client.widget.Component.fireEvent(Component.java:457)
at com.extjs.gxt.ui.client.widget.menu.Item.onClick(Item.java:143)
at com.extjs.gxt.ui.client.widget.menu.Menu.onClick(Menu.java:589)
at com.extjs.gxt.ui.client.widget.menu.Menu.onComponentEvent(Menu.java:320)
at com.extjs.gxt.ui.client.widget.Component.onBrowserEvent(Component.java:756)
at com.google.gwt.user.client.DOM.dispatchEventImpl(DOM.java:1320)
at com.google.gwt.user.client.DOM.dispatchEventAndCatch(DOM.java:1299)
at com.google.gwt.user.client.DOM.dispatchEvent(DOM.java:1262)


Any ideas?
Thanks.

[edumrf]

oops forgot to send the screen...

14866

[sven]

M2 is very old and was a eraly release. You should not use it anymore and update to the final release.

[edumrf]

I just updated to the final release and got this other error instead:



[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (Error): Unknown runtime error
number: -2146827687
description: Unknown runtime error
at com.google.gwt.dom.client.Element$.setInnerHTML$(Native Method)
at com.extjs.gxt.ui.client.widget.grid.GridView.renderUI(GridView.java:1544)
at com.extjs.gxt.ui.client.widget.grid.GridView.render(GridView.java:1496)
at com.extjs.gxt.ui.client.widget.grid.Grid.afterRender(Grid.java:603)
at com.extjs.gxt.ui.client.widget.Component.render(Component.java:961)
at com.extjs.gxt.ui.client.widget.Component.render(Component.java:869)
at com.extjs.gxt.ui.client.widget.layout.TableLayout.renderComponent(TableLayout.java:403)
at com.extjs.gxt.ui.client.widget.Layout.renderAll(Layout.java:249)
at com.extjs.gxt.ui.client.widget.layout.TableLayout.onLayout(TableLayout.java:394)
at com.extjs.gxt.ui.client.widget.Layout.layout(Layout.java:96)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:348)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:364)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:364)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:368)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:364)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:444)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:241)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:427)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:236)
at com.extjs.gxt.ui.client.widget.Window.layout(Window.java:497)
at com.extjs.gxt.ui.client.widget.Window.afterShow(Window.java:827)
at com.extjs.gxt.ui.client.widget.Window.show(Window.java:799)
at br.com.dyad.client.DesktopMenu$3.componentSelected(DesktopMenu.java:346)
at br.com.dyad.client.DesktopMenu$3.componentSelected(DesktopMenu.java:1)
at com.extjs.gxt.ui.client.event.SelectionListener.handleEvent(SelectionListener.java:20)
at com.extjs.gxt.ui.client.event.SelectionListener.handleEvent(SelectionListener.java:1)
at com.extjs.gxt.ui.client.event.BaseObservable.callListener(BaseObservable.java:176)
at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:96)
at com.extjs.gxt.ui.client.widget.Component.fireEvent(Component.java:444)
at com.extjs.gxt.ui.client.widget.menu.Item.onClick(Item.java:143)
at com.extjs.gxt.ui.client.widget.menu.Menu.onClick(Menu.java:590)
at com.extjs.gxt.ui.client.widget.menu.Menu.onComponentEvent(Menu.java:321)
at com.extjs.gxt.ui.client.widget.Component.onBrowserEvent(Component.java:760)
at com.google.gwt.user.client.DOM.dispatchEventImpl(DOM.java:1320)
at com.google.gwt.user.client.DOM.dispatchEventAndCatch(DOM.java:1299)
at com.google.gwt.user.client.DOM.dispatchEvent(DOM.java:1262)

[Helton Gon]

I have the same problem. This has been happen a long time..

[edumrf]

If i resize the browser window the gxt Window shows upo at the bottom of the page.

That's how it looks before resizing:
14890

After resizing:
14891

Plus a bunch of errors on events.
Any help?

Thanks.

[sven]

You should try to not use a tablelayout.

[edumrf]

Sven, previously i was using a FormLayout and got the same problem. What's the problem with the layout? On m3 it worked.

[sven]

A table is not working in all places in internetexplorer.

[edumrf]

I'm having the same issue on hosted mode and on Firefox.