我在用着ext-gwt http://www.sencha.com/products/gwt/并且不知道如何分割面板,以便我有 2 个小部件,可调整大小的分割器的每一侧各一个,两个小部件的高度均为 100%,宽度可变。
本质上,我想要的是这样的:
-----------------------------------------
| Widget1 | Widget2 |
| | |
| | |
| | |
| | |
| <-|-> |
| | |
| | |
| | |
| | |
-----------------------------------------
我用 BorderLayout 尝试过,但我认为我做错了,它不起作用(小部件的垂直高度不会占据整个屏幕)。有人可以帮忙吗?这是我尝试过的最新形式:
public void onModuleLoad() {
Viewport v = new Viewport();
v.setLayout(new RowLayout(Orientation.HORIZONTAL));
ContentPanel panel1 = new ContentPanel();
panel1.setHeading("Panel 1");
ContentPanel panel2 = new ContentPanel();
panel2.setHeading("Panel 2");
v.add(panel1, new RowData(.3, 1));
v.add(new SplitBar(LayoutRegion.EAST, panel1));
v.add(panel2, new RowData(.7, 50));
RootPanel.get().add(v);
}
Thanks!
真的很简单。
首先确保您的视口具有合适的布局。
然后您可以使用如下所示的边框布局进行分割。将此面板添加到示例中的视口中。
(更喜欢边框布局而不是分割器,以防万一我以后想要更多区域)
然后只需将数据/小部件/面板添加到两个内容面板即可。
package com.gerharddavids.example;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.user.client.Element;
public class BorderLayoutExample extends LayoutContainer {
protected void onRender(Element target, int index) {
super.onRender(target, index);
final BorderLayout layout = new BorderLayout();
setLayout(layout);
setStyleAttribute("padding", "10px");
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
//uncomment this section if you dont want to see headers
/*
* west.setHeaderVisible(false);
* center.setHeaderVisible(false);
*/
BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setMargins(new Margins(0,5,0,0));
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(0));
add(west, westData);
add(center, centerData);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)