flex之小功能：列的隐藏

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

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

效果：






主要实现代码：

<?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>