GXT之旅：第三章：表单和窗口(2)——Window

Window

Window的父类的ContentPanel，他是在程序中用来显示窗口的component。有些类似与Popup，但是Window的窗口有已经定义好的布局效果，比如拖拽，关闭按钮，用户拖拉其大小等。

FitLayout

如果我们要在Window里加入一个表单，我们希望整个表单可以填满整个Widnow窗口，所以就要使用FitLayout布局。任何一个包裹着一个子集的容器，都可以应用此布局。

创建FeedWindow component

接下来，我们要创建一个新的Widnow，来作为feed表单的容器。通过Create feet button来显示此Window。

• 创建新包：com.danielvaughan.rssreader.client.windows，在此包下，创建新FeedWindow类

public class FeedWindow extends Window {}

• 同样要在构造函数里，设置题头。但是此次的构造函数，有一个参数是Feed

public FeedWindow(final Feed feed) {
setHeading("Feed");
}

• 再加入一些其他的设置

public FeedWindow(final Feed feed) {
setHeading("Feed");
setWidth(350);
setHeight(200);
setResizable(false);
setLayout(new FitLayout());
}

• Create feed Button先前被添加到RssNavigationPanel类中。现在，我们需要给Create feed button，添加SelectionListener，来新建FeedWindow窗口。

btnCreateFeed
	.addSelectionListener(new SelectionListener<ButtonEvent>() {
	@Override
	public void componentSelected(ButtonEvent ce) {
	createNewFeedWindow();
	}
});

• 在RssNavigationPanel类中，加入createNewFeedWindow()方法的实现。
  

	private void createNewFeedWindow() {
		final Window newFeedWindow = new FeedWindow(new Feed());
		newFeedWindow.show();
	}

• 运行程序，当我们点击Create feed button的时候，就会弹出FeedWindow。

• 最后，完整的RssNavigationPanel类如下：

package com.danielvaughan.rssreader.client.components;

import com.danielvaughan.rssreader.client.windows.FeedWindow;
import com.danielvaughan.rssreader.shared.model.Feed;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ToggleButton;
import com.extjs.gxt.ui.client.widget.tips.ToolTipConfig;

public class RssNavigationPanel extends ContentPanel {
	public RssNavigationPanel() {
		setHeading("Navigation");
		final ToggleButton btnLinkFeed = new ToggleButton("Link feed");
		btnLinkFeed.setIconStyle("link-feed");
		setButtonAlign(HorizontalAlignment.LEFT);

		ToolTipConfig linkFeedToolTipConfig = new ToolTipConfig();
		linkFeedToolTipConfig.setTitle("Link to existing RSS feed");
		linkFeedToolTipConfig
				.setText("Allows you to enter the URL of an existing RSS feed you would like to link to");
		btnLinkFeed.setToolTip(linkFeedToolTipConfig);

		final LinkFeedPopup linkFeedPopup = new LinkFeedPopup();
		linkFeedPopup.setConstrainViewport(true);
		btnLinkFeed.addSelectionListener(new SelectionListener<ButtonEvent>() {
			@Override
			public void componentSelected(ButtonEvent ce) {
				if (btnLinkFeed.isPressed()) {
					linkFeedPopup.show(btnLinkFeed.getElement(), "bl-tl?");
				} else {
					linkFeedPopup.hide();
				}
			}
		});

		final Button btnCreateFeed = new Button("Create feed");
		btnCreateFeed.setIconStyle("create-feed");
		ToolTipConfig createNewToolTipConfig = new ToolTipConfig();
		createNewToolTipConfig.setTitle("Create a new RSS feed");
		createNewToolTipConfig.setText("Creates a new RSS feed");
		btnCreateFeed.setToolTip(createNewToolTipConfig);

		btnCreateFeed
				.addSelectionListener(new SelectionListener<ButtonEvent>() {
					@Override
					public void componentSelected(ButtonEvent ce) {
						createNewFeedWindow();
					}
				});

		addButton(btnCreateFeed);

		addButton(btnLinkFeed);
	}

	private void createNewFeedWindow() {
		final Window newFeedWindow = new FeedWindow(new Feed());
		newFeedWindow.show();
	}
}