如何创建自定义Ext GWT的组件

大家都知道,如果你没有一个好的基础,而去创建一个自定义的web控件是一件很具有挑战性的事.幸运的是Ext GWT框架包含了一个组件API,它提供了使用JAVA快速,轻松地创建自定义的组件的功能.这篇文章将引导我们如何创建一个"内容滚动框"(图1) -- 一个Ext GWT的UX组件.

(图1)

内容滚动框
该"内容滚动框"组件请允许任何内容进行垂直放置,当点击导航栏上面各下面的滚动按钮时,
内容也会随着上下滚动.点击这里查看已经完成的样板.

我们的扩展用户界面
我们的这个用户扩展将会显示两个导航栏,这两个栏必须用HTML标记,CSS和图片到定义样式.

图片
这一个组件使用了两张图片,一个是导航栏背景,一个是上下箭头.两个箭头放在同一张图片中,使用了现在流行的CSS偏移来显示图片的上下箭头.作为本方法的替代方法,有GWT ImageBundle可以使用,而不需要创建CSS和手动设置偏移数.

HTML标记
对于HTML标记,在每一个导航栏里面都会使用一个表格元素.该表格有1行3列(左,中,右).左侧和右侧将用来显示导航栏,中心区域将显示导航栏之间的中间部分.左右两侧的列宽都是固定的.中心区域会根据可用宽度动态变化.

<div unselectable="on" class=" x-cscroller-bar x-unselectable " id="x-auto-0">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="x-cscroller-left"></td>
<td class="x-cscroller-center">
<div> 
</div></td>
<td class="x-cscroller-right"></td>
</tr>
</tbody>
</table>
</div>

.x-cscroller-left {
width: 20px;
height: 22px;
background: url(bar.gif);
}
.x-cscroller-right {
width: 20px;
background: url(bar.gif) top right;
}
.x-cscroller-center {
background: url(bar.gif) top center;
}
.x-cscroller-center div {
background: url(arrows.gif) no-repeat center -9px;
height: 8px;
overflow: hidden;
}
.x-cscroller-top-disabled .x-cscroller-center div {
background-position: center 0px;
}
.x-cscroller-bottom .x-cscroller-center div {
background-position: center -16px;
}
.x-cscroller-bottom-disabled .x-cscroller-center div {
background-position: center -24px;
}
.x-cscroller .container {
overflow: hidden;
position: relative;
margin: 6 0px;
}
.x-cscroller .scroller {
position: relative;
}

该部分将主要有三个组成部分：最上面一栏，内容区，底部栏.

导航栏
"导航栏"自定义组件将会被定义为"内容滚轮"的内部类,导航栏的每一个渲染和逻辑都将被封装.由于导航栏不需要"改变大小"所以它可以从Component组件扩展,而不是从BoxComponent组件.Ext GWT是以"懒惰"的方式渲染它的组件的.也就是说DOM元素不会在组件初始化的时候就被创建.相反,DOM元素会在组件被添加到COM节点之前创建.这不同于其他在组件初始化时就创建DOM元素的GWT小器件. "懒惰"渲染可以确保在真正需要它们之前DOM元素不会被创建.

在我们新建一个自定义控件时,首先要重写OnRender方法,让它可以支持创建组件的根DOM元素.对这这个组件来说,该组件表示为一个HTML DIV元素.

接下来，我们需要建立"导航栏"的HTML表的结构.当然不是使用DOM API来手动创建元素使用DOM API时,HTML结构是先创建StringBuffer,然后用它来创建元素的.这种方法速度要远远快过我们直接对DOM操作。

我们要知道当用户点击"导航栏"的向上前头时,我们要让内容也向上.我们在组件初始化的时候就调用 sinkEvents 来描述有哪些指定的事件.

更多详细内容请见英文原版:
http://www.extjs.com/blog/2009/11/23/creating-a-custom-ext-gwt-component/