本章我们要了解GXT的Portal&Drag-Drop功能。我们会首先学习如何使用Portal（非常类似谷歌的iGoogle功能）布局和Portlet，然后再以实践的方式学习GXT的拖拽功能。
我们会涉及到如下GXt功能集
- Portal
- Portlet
- Draggable
- DragSource
- GridDropTarget
- ListViewDropTarget
- TreeGridDropTarget
- TreePanelDropTarget
- ColumnLayout
- RowLayout
Portlet class
Portlet 类继承自ContentPanel，她提供了一种特殊的panel，可以在Viewport的Portal容器里，随意的更改显示位置和大小。她很像widows系统里面的桌面应用。
新建一个Portlet的过程很类似于其他容器的创建。
?
- Portlet?portlet?=?new?Portlet();??
- portlet.setHeight(150);??
- portlet.setHeading("Example?Portlet");??
运行效果如下：
?
- portal.setPinned(true);??
设置其是否可以被重置位置。除此之外，Portlet继承ContentPanel的所有功能
?
Portal class
Portal是专门为Portlet设置的容器。事实上，其容器包含了一组按照ColumnLayout布局的LayoutContainer。其中每一个LayoutContainer都包含一个Portlet，布局效果为RowLayout。?
Portal同样支持Portlet的拖拽功能。Portal里面会有列，每一个列里面又包含行。因此就有了表格的概念，所以当新建一个Portal的时候，我们就需要在构造函数里，设置有多少列。当然还得通过setColumnWidth()方法设置其每一列的宽度。
假如，我们想创建一个两列的，分别是30％，70％宽的Portal的时候。我们会有如下代码
?
- Portal?portal?=?new?Portal(2);??
- portal.setColumnWidth(0,?0.3);??
- portal.setColumnWidth(1,?0.7);??
当Portal定义好了之后，我们要往每一列里放入Portlet（其宽度自动的跟着column的宽度适应，只需要设置高度既可）
?
?
- Portlet?portlet1?=?new?Portlet();??
- portlet1.setHeight(150);??
- portlet1.setHeading("Example?Portlet?1");??
- portal.add(portlet1,?0);??
- ??
- Portlet?portlet2?=?new?Portlet();??
- portlet2.setHeight(150);??
- portlet2.setHeading("Example?Portlet?2");??
- portal.add(portlet2,?1);??
生成后的效果如下：
?
左右两个Portlet可以被拖拽到不同的位置。当一个Portlet正在被拖拽的时候，其效果如下
当右侧的portlet被拖拽到左侧的时候，会自动的改变宽度
?
?
ToolButton
?
正是因为Portlet继承了ContentPanel，所以我们可以在其头部添加ToolButton。这样一来，可以让Portlet在功能和显示效果上，更接近桌面的应用窗口。
- portlet.getHeader().addTool(new?ToolButton("x-tool-minimize"));??
- portlet.getHeader().addTool(new?ToolButton("x-tool-maximize"));??
- portlet.getHeader().addTool(new?ToolButton("x-tool-close"));??
如上的三行代码，就会构建出如下的效果
