当前页面位置: » 丰搜网 » 文档中心 » 详细内容
在list组件中使用渲染器
在网上看过很多人转载darronschall的 labelcellrenderer 例子，其中有个错误，把mylist.cellrenderer = "labelcellrenderer";这行代码放到了注释里面去了，但是到处转载的依然没有修正（其实原文是正确的）。
其实看了这个我们并没有求甚解，要知道授人予鱼，不如授人予渔。我们再来看下为什么通过cellrenderer可以给list、datagrid、tree 和 menu 组件以及其它列表组件增强单元格内容显示。
我们首先要从list组件开始分析，list 类至关重要。datagrid、tree 和 menu 组件是 list 类的扩展。
list 类由行构成。这些行显示滑过和选区突出显示，用作行选区的点击状态，并在滚动中扮演重要的角色。除了选区突出显示和图标（如节点图标和 tree 组件的展开箭头）之外，行还包含一个单元格（或者，如果是 datagrid，则包含多个单元格）。在默认情况下，这些单元格是实现 cellrenderer api 的 textfield 对象。但是，您可以让 list 使用不同的组件类作为每一行的单元格。唯一的要求是该类必须实现 list 用于与单元格通信的 cellrenderer api。
list 类使用一种非常复杂的算法进行滚动。一个列表只会列出它一次能显示的最多行数，超出 rowcount 属性的值的项目根本不会获得行。在列表滚动时，它会将所有行上下移动（取决于滚动方向）。然后，列表将重复使用滚出视图的行；列表会重新初始化这些行，并使用它们作为正在滚入视图的新行，方法是将旧行的值设置为视图中的新行，然后将旧行移到新项目滚入视图的位置。
要使用 cellrenderer api，您必须编写包含下面四个方法的类
cellrenderer.getpreferredheight() 返回单元格的首选高度
cellrenderer.getpreferredwidth() 返回单元格的首选宽度
cellrenderer.setsize() 设置单元格的宽度和高度
cellrenderer.setvalue() 设置要显示在单元格中的内容
基于列表的组件将使用该类与单元格通信。这就是我们看到的darronschall定义的labelcellrenderer类。
系统将为单元格自动指定两个方法和一个属性
cellrenderer.getcellindex() 返回包含单元格渲染器数据字段的名称的字符串
cellrenderer.getdatalabel() 返回包含两个字段（columnindex 和 rowindex）的对象，这两个字段指明单元格的位置
cellrenderer.listowner 指向包含单元格的列表的引用
以便允许它与基于列表的组件通信。例如，假设单元格内包含一个复选框，该复选框导致行在单击时被选中。单元格渲染器需要引用包含它的基于列表的组件，以便调用基于列表的组件的 selectedindex 属性。同时，单元格需要知道它当前正在渲染的项目索引，以便能够将 selectedindex 设置为正确的编号；单元格可以使用 cellrenderer.listowner 和 cellrenderer.getcellindex() 达到此目的。您不需要实现这些 api；在将单元格放到基于列表的组件内时，单元格将自动接收这些 api。
我们来看下labelcellrenderer类实现的这几个方法代码：
function createchildren(void) : void {
label = createobject("label", "label", 1, { stylename:this, owner:this });
label.html = true;
size();
}
// setsize is implemented by uicomponent and calls size(), after setting
// __width and __height
function size(void) : void {
label.setsize(__width, __height);
// make sure the label field is in the top-left corner
// of the row
label._x = 0;
label._y = 0;
}
function setvalue(str:string, item:object, sel:boolean) : void {
// hide the label if no data to display
label._visible = (item!=undefined);
// this line actually sets htmltext
label.text = item.label;
}
function getpreferredheight(void) : number {
// this is the height with the default font, you might
// need to adjust this to suit your needs
return 18;
}
function getpreferredwidth(void) : number {
// default to the width of the listbox
return __width;
}
其中用来显示html标记的就是setvalue方法了。
我们定义了这个类后，剩下就是对list组件来设置新的单元格渲染器了。使用下面的代码：
1 : //labelcellrenderer就是指定单元格渲染的连接id
2 : mylist.cellrenderer = "labelcellrenderer";
也许看完这些，你可以做出更好效果的渲染器来。要注意的是，只有flashmx2004的list组件才支持。
