[BUG] RowLayout not rendering properly with height and width of Style.DEFAULT

[negge]

Leaving the height and width as Style.DEFAULT incorrectly renders the next widget on top of the first and does not use the components size, as indicated in the JavaDoc's.


import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

class SettingsTabItem extends TabItem {

public SettingsTabItem() {
setText("Settings");
}

protected void onRender(Element _parent,int _index) {
super.onRender(_parent,_index);

setLayout(new RowLayout(Orientation.HORIZONTAL));

ContentPanel left=new ContentPanel();
left.setHeading("Left");
left.setSize(150,250);
RowData data=new RowData();
//RowData data=new RowData(150,250);
data.setMargins(new Margins(10));
add(left,data);

ContentPanel right=new ContentPanel();
right.setHeading("Right");
right.setLayout(new RowLayout(Orientation.VERTICAL));
add(right,new RowData(1,1,new Margins(10,10,10,0)));

ContentPanel top=new ContentPanel();
top.setHeading("Top");
top.setHeight(200);
data=new RowData();
data.setMargins(new Margins(0));
right.add(top,data);

ContentPanel bottom=new ContentPanel();
bottom.setHeading("Bottom");
bottom.setLayout(new RowLayout(Orientation.HORIZONTAL));
right.add(bottom,new RowData(1,1,new Margins(10,0,0,0)));

ContentPanel left2=new ContentPanel();
left2.setHeading("Left 2");
left2.setSize(150,250);
data=new RowData();
//data=new RowData(150,250);
data.setMargins(new Margins(0));
bottom.add(left2,data);

ContentPanel right2=new ContentPanel();
right2.setHeading("Right 2");
bottom.add(right2,new RowData(1,1,new Margins(0,0,0,10)));
}
}

public class TestProject implements EntryPoint {

public void onModuleLoad() {
final Viewport viewport=new Viewport();
viewport.setLayout(new FillLayout());
RootPanel.get().add(viewport);

ContentPanel content=new ContentPanel();
content.setBorders(false);
content.setHeaderVisible(false);
content.setLayout(new FitLayout());
viewport.add(content);

TabPanel tabPanel=new TabPanel();
tabPanel.setTabScroll(true);
tabPanel.setBorderStyle(false);
tabPanel.setBodyBorder(false);
content.add(tabPanel);

tabPanel.add(new SettingsTabItem());
}

};Nathan

[negge]

The changes in SVN still fail this case.


import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.binder.DataListBinder;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.DataList;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

class Item extends BaseModel {

public Item(String _name) {
super();
setName(_name);
}

public String getName() {
return((String)get("name"));
}

public void setName(String _name) {
set("name",_name);
}

};

class ItemListEditor extends ContentPanel {

protected DataList list;

public ItemListEditor(ListStore<Item> _items) {
setHeading("Items");
setFrame(true);
setInsetBorder(false);
setSize(150,250);
setLayout(new FitLayout());

list=new DataList();
list.setFlatStyle(true);
add(list);

final DataListBinder<Item> itemBinder=new DataListBinder<Item>(list,_items);
itemBinder.setDisplayProperty("name");
itemBinder.addSelectionChangedListener(new SelectionChangedListener<Item>() {
public void selectionChanged(SelectionChangedEvent<Item> _se) {
Item item=_se.getSelectedItem();
onItemSelected(item);
}
});
itemBinder.init();
}

protected void onItemSelected(Item _item) {

}
};

class ItemEditor extends FormPanel {

protected Item item;

protected TextField<String> nameTextField;

public ItemEditor(Item _item) {
item=_item;

setHeaderVisible(false);
setBodyBorder(false);
setFrame(true);
setWidth(400);

nameTextField=new TextField<String>();
nameTextField.setFieldLabel("Name");
nameTextField.setAllowBlank(false);
nameTextField.setMinLength(3);
nameTextField.setValue(item.getName());
add(nameTextField);

Button updateButton=new Button("Update",new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
if (isValid()) {
onValidSubmit();
}
}
});
addButton(updateButton);
}

protected void onValidSubmit() {
// RPC call to update backend
item.setName(nameTextField.getValue());
}
};

class SettingsTabItem extends TabItem {

public SettingsTabItem() {
setText("Settings");

setLayout(new RowLayout(Orientation.HORIZONTAL));

final ContentPanel itemPanel=new ContentPanel();
itemPanel.setHeading("Item Editor");
itemPanel.setLayout(new RowLayout(Orientation.VERTICAL));

ListStore<Item> items=new ListStore<Item>();
items.setMonitorChanges(true);
items.add(new Item("Apple"));
items.add(new Item("Oranges"));
items.add(new Item("Grapes"));

ItemListEditor itemListEditor=new ItemListEditor(items) {
protected void onItemSelected(Item _item) {
itemPanel.removeAll();
if (_item!=null) {
itemPanel.add(new ItemEditor(_item));

ContentPanel bottom=new ContentPanel();
bottom.setHeading("Bottom");
bottom.setLayout(new RowLayout(Orientation.HORIZONTAL));
itemPanel.add(bottom,new RowData(1,1,new Margins(10,0,0,0)));

final ContentPanel subItemPanel=new ContentPanel();
subItemPanel.setHeading("Sub Item Editor");
subItemPanel.setLayout(new RowLayout(Orientation.VERTICAL));

ListStore<Item> subItems=new ListStore<Item>();
subItems.setMonitorChanges(true);
subItems.add(new Item("Dog"));
subItems.add(new Item("Cat"));
subItems.add(new Item("Bird"));

ItemListEditor subItemListEditor=new ItemListEditor(subItems) {
protected void onItemSelected(Item _subItem) {
subItemPanel.removeAll();
if (_subItem!=null) {
subItemPanel.add(new ItemEditor(_subItem));
}
subItemPanel.layout();
}
};
bottom.add(subItemListEditor);
bottom.add(subItemPanel,new RowData(1,1,new Margins(0,0,0,10)));
}
itemPanel.layout();
}
};
RowData data=new RowData();
//RowData data=new RowData(150,250);
data.setMargins(new Margins(10));
add(itemListEditor,data);

add(itemPanel,new RowData(1,1,new Margins(10,10,10,0)));
}
}

public class TestProject implements EntryPoint {

public void onModuleLoad() {
final Viewport viewport=new Viewport();
viewport.setLayout(new BorderLayout());
RootPanel.get().add(viewport);

ContentPanel navigation=new ContentPanel();
navigation.setHeading("Users");
navigation.setScrollMode(Scroll.AUTO);
navigation.setLayout(new FitLayout());

BorderLayoutData data=new BorderLayoutData(Style.LayoutRegion.WEST,200,150,300);
data.setMargins(new Margins(5,5,5,5));
data.setCollapsible(true);
viewport.add(navigation,data);

ContentPanel content=new ContentPanel();
content.setBorders(false);
content.setHeaderVisible(false);
content.setLayout(new FitLayout());

data=new BorderLayoutData(Style.LayoutRegion.CENTER);
data.setMargins(new Margins(5,5,5,0));
viewport.add(content,data);

TabPanel outer=new TabPanel();
outer.setTabScroll(true);
outer.setBorderStyle(false);
outer.setBodyBorder(false);
content.add(outer);

TabItem page=new TabItem();
page.setItemId("p1");
page.setText("Project 1");
page.setLayout(new FitLayout());
outer.add(page);

ContentPanel main=new ContentPanel();
main.setBodyBorder(false);
main.setHeaderVisible(false);
main.setLayout(new FitLayout());
page.add(main);

ToolBar toolBar=new ToolBar();
main.setTopComponent(toolBar);

TabPanel tabPanel=new TabPanel();
tabPanel.setTabScroll(true);
tabPanel.setBorderStyle(false);
tabPanel.setBodyBorder(false);
tabPanel.setTabPosition(TabPanel.TabPosition.BOTTOM);
main.add(tabPanel);

tabPanel.add(new SettingsTabItem());
}

};Nathan

[negge]

Bump, I believe this is still an issue.