GXT之旅：第二章：GXT组件(6)——定制组件

定制组件

在GXT，乃至GWT中，定制组件是非常普遍并且有用的。定制组件大致可以分为两种：第一种，修改一个现有组件的功能；第二种，封装一个或多个组件并且加入新的功能，使其成为一个新的组件。相对于GXT而言，GWT有一个复合组件的概念——通过把一个组件包装到另外一个组件之上，从而达到定制组件的效果。但是GXT如果想实现这种复合组件会发生很多问题！

比如前面所用到的ContentPanel，用于RSSReader项目的west导航区。当把ContentPanel生成的对象放入west区显示的时候，同时也设置了其可折叠功能。但是如果基于ContentPanel创建一个复合组件的话，那个折叠功能的按钮就再也不会出现了。

原因是，当你要创建一个复合组件的话，那些public API方法就会不可见。GXT的设计理念是，如果要把几个组件复合成一个新的组件的话，就视为你怀疑GXT components自带的功能，既然如此那么这些功能就做废掉了，你将无法使用它们。

综上所述，GXT制定组件的最佳方法就是继承某个Component，然后直接或间接的使用其他的components。

onRender()

根据此理论，我们可以很灵活的把需要立即执行的代码写在当前component的构造函数理，把需要在当前component被渲染之后，再执行的代码写在onRender()方法里。按照如此的编程思想，可以很好的提高GXT应用程序的性能和效率。

现在，我们就开始在RSSReader项目上，开始第一个定制组件——把原先应用在west导航区和center内容区的两个ContentPanels，替换为自定义的components。（随着RSSReader项目开发，我们将加入更多的定制组件）

• 在RSSReader项目里，新建package：com.danielvaughan.rssreader.client.components；再在此包下，新建RssNavigationPanel类，继承ContentPanel。作为west导航区域显示的内容。

package com.danielvaughan.rssreader.client.components;

import com.extjs.gxt.ui.client.widget.ContentPanel;
public class RssNavigationPanel extends ContentPanel 
{
	public RssNavigationPanel() 
	{
		setHeading("Navigation");
	}
}

• 同样的，新建RssMainPanel类，作为center内容区显示的内容。仅仅设置一下题头而已。
  

package com.danielvaughan.rssreader.client.components;

import com.extjs.gxt.ui.client.widget.ContentPanel;

public class RssMainPanel extends ContentPanel 
{
	public RssMainPanel() 
	{
		setHeading("Main");
	}
}

• 接下来，在RSSReader类的onModuleLoad()方法中，用新建的两个定制components替换原来的ContentPanels
  

package com.danielvaughan.rssreader.client;

import com.danielvaughan.rssreader.client.components.RssMainPanel;
import com.danielvaughan.rssreader.client.components.RssNavigationPanel;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class RSSReader implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	@Override
	public void onModuleLoad() {
		Viewport viewport = new Viewport();
		final BorderLayout borderLayout = new BorderLayout();

		BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
				20);
		northData.setCollapsible(false);
		northData.setSplit(false);

		HTML headerHtml = new HTML();
		headerHtml.setHTML("<h1>RSS Reader</h1>");
		viewport.add(headerHtml, northData);

		BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
		centerData.setCollapsible(false);

		BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST,
				200, 150, 300);
		westData.setCollapsible(true);
		westData.setSplit(true);

		RssMainPanel mainPanel = new RssMainPanel();
		RssNavigationPanel navPanel = new RssNavigationPanel();
		viewport.add(mainPanel, centerData);
		viewport.add(navPanel, westData);

		viewport.setLayout(borderLayout);
		RootPanel.get().add(viewport);
	}
}

• 最后运行应用程序，会看到导航区和内容区的题头。