flex之小功能：列的隐藏

[size=medium]在网上看到一个效果不错：
Flex中如何利用PopUpButton控件创建一个弹出TitleWindow的例子
[url]http://blog.minidx.com/2008/04/14/713.html[/url]

想到为了方便客户，做了一个小功能：列的隐藏
其实很简单，不过我是新手...有不对或优化的地方欢迎高手指点..

效果：

[img]/upload/attachment/82814/c71e5c64-022b-3633-87cb-4bc99fa1d6fa.jpg[/img]

[img]/upload/attachment/82813/5f4a14c2-5ce8-36a1-a71f-016e29f08e59.jpg[/img]


主要实现代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"
creationComplete="creationComplete()">
<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;
import mx.controls.CheckBox;

//定义一个CheckBox中用到的列数组arr
[Bindable]
private var arr:ArrayCollection = new ArrayCollection();

//载入页面时就初始化arr，此处是根据列的ID一列一列加上去的，还没有想到动态绑定方法，望高手指点....
private function creationComplete():void
{
arr.addItemAt(username,0);
arr.addItemAt(password,1);
arr.addItemAt(age,2);
arr.addItemAt(telephone,3);
arr.addItemAt(email,4);
}

//隐藏显示列处理：默认的为选择，取消选择之后就实现隐藏
private function checkBox_change(evt:Event):void {
var ch:CheckBox = evt.currentTarget as CheckBox;
var idx:int = int(ch.data);
var obj:Object = arr.getItemAt(idx);
if(obj.visible == true){
obj.visible = false;
}
else{
obj.visible = true;
}
}
//隐藏显示列处理：全选处理，可有可无的功能，不过列多的时候方便操作
private function selectAll(evt:Event):void {
var idx:int;
var item:Object;
for (idx=0; idx<arr.length; idx++) {
item = arr.getItemAt(idx);
item.visible =
CheckBox(evt.currentTarget).selected;
}
arr.refresh();
}
]]>
</mx:Script>
//此处用得的分页方法是修改自hereson的分页方法： http://hereson.iteye.com/blog/188512
<local:PageDataGrid id="dg" x="9.15" y="25.75">

<local:arrColumns><!--为这个标签设置DataGridColumn，指示在DataGrid上显示的列-->

<mx:DataGridColumn headerText="用户名" id="username" dataField="username"/>

<mx:DataGridColumn headerText="密码" id="password" dataField="password"/>

<mx:DataGridColumn headerText="年龄" dataField="age" id="age"/>

<mx:DataGridColumn headerText="联系方式" dataField="telephone" id="telephone"/>

<mx:DataGridColumn headerText="电子信箱" dataField="email" id="email"/>

</local:arrColumns>

</local:PageDataGrid>
//这儿包含了PopUpButton、TitleWindow、ToolBar、Repeater、CheckBox多个组件（其实是可以优化的），希望不要看晕.....
<mx:PopUpButton id="popUpButton"
label="请选择要隐藏的列"
openAlways="true"
x="9" y="0" width="141" height="27" fontSize="12">
<mx:popUp>
<mx:TitleWindow id="titleWin"
height="200"
showCloseButton="true"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
close="popUpButton.close();">
<mx:ToolBar width="220">
<mx:Repeater id="myRep"
dataProvider="{arr}">
<mx:CheckBox data="{myRep.currentIndex}"
label="{myRep.currentItem.headerText}" //这儿显示的Lable是引用的列的headerText属性实现的
selected="{myRep.currentItem.visible}" //这儿默认选择是引用的列的visible属性实现的
change="checkBox_change(event);" //当有变化的时候调用checkBox_change(event)方法
width="80" />
</mx:Repeater>
</mx:ToolBar>
<mx:ControlBar>
<mx:CheckBox label="选择全部"
labelPlacement="right"
selected="true"
change="selectAll(event);" /> //当有变化的时候调用selectAll(event)方法
</mx:ControlBar>
</mx:TitleWindow>
</mx:popUp>
</mx:PopUpButton>

</mx:Application> [/size]