小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

DataGrid checkbox itemEditor

    一个不错的datagrid itemrender实例。
这个例子说明了如何创建一个基于VBox的itemEditor,这个itemEditor有子控件(这个例子里是一个checkbox)。
    而且说明了如何继承IDropInListItemRenderer 和IFocusManagerComponent 接口。
    还说明了如何添加监听器到数据源,以用来侦测change事件,并在Checkbox状态改变后显示哪些数据发生了改变.
示例:

代码:
MXML:
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="init()">
    
<mx:script>
        
<!–[CDATA[
            import mx.events.CollectionEvent;
            import mx.events.DataGridEventReason;
            import mx.collections.ArrayCollection;
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;

            [Bindable]–
>            private var myAC:ArrayCollection = new ArrayCollection([
                {id:89, Contact: ‘Bob Jones’, FollowUp: true },
                {id:5, Contact: ‘Jane Smith’, FollowUp: true },
                {id:7, Contact: ‘Doug Johnson’, FollowUp: false },
                {id:15, Contact: ‘John Jackson’, FollowUp: true },
                {id:21, Contact: ‘Christina Coenraets’, FollowUp: true },
                {id:4, Contact: ‘Joanne Wall’, FollowUp: false },
                {id:461, Contact: ‘Maurice Smith’, FollowUp: false },
                {id:35, Contact: ‘Lorraine Barnes’, FollowUp: true },
                {id:61, Contact: ‘The Dude’, FollowUp: true },
                {id:56, Contact: ‘Abe Rockaway’, FollowUp: true }

            ]);

            private function init():void{
                myAC.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChange);
            }

            private function onChange(event:CollectionEvent):void{
                for (var i:int=0; i 
< event.items.length;i++){
                    var obj:Object
=event.items[i].source;
                     
for (var p:String in obj) {
                            if(p!
="mx_internal_uid"){
                                cellInfo.text +
= "\n";
                                if(event.items[i].property
==p){cellInfo.text +="*"}
                                 cellInfo.text +
= p+": " + obj[p];
                            }
                        }
                }
            }

        ]]
>
    
</mx:script>
    
<mx:datagrid id="myGrid">
        dataProvider="{myAC}" editable="true" >
        
<mx:columns>
            
<mx:datagridcolumn datafield="Contact" width="150">
            
<mx:datagridcolumn datafield="id" width="150" editable="false">
            
<mx:datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        
</mx:datagridcolumn>
    
</mx:datagridcolumn>  

    
<mx:textarea id="cellInfo" width="300" height="150">    

</mx:textarea>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>

itemEditor:
<!– itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml –>
<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml">
    implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">

    
<mx:script>
        
<!–[CDATA[
            import mx.controls.listClasses.ListData;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;
            import mx.controls.dataGridClasses.DataGridItemRenderer
            import mx.events.FlexEvent;

            private var _listData:DataGridListData;
            // Define a property for returning the new value to the cell.
            public var cbSelected:Boolean;            

            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(draw:Boolean):void {
                followUpCB.setFocus();
            }

            [Bindable]–
>           override public function set data(value:Object):void{
                super.data = value;
                followUpCB.selected=data[_listData.dataField];
            }

            override public function get data():Object {
                return super.data;
            }            

            public function get listData():BaseListData
            {
                return _listData;
            }

            public function set listData(value:BaseListData):void
            {
                _listData = DataGridListData(value);
            }   

        ]]>
    
</mx:script>

    
<mx:checkbox id="followUpCB" label="Follow up needed">
        change="cbSelected=followUpCB.selected"/>
</mx:checkbox>
</mx:vbox>

源文件下载

来自:http://blog.flexmonkeypatches.com/2007/11/06/datagrid-checkbox-itemeditor/

posted on 2008-05-18 19:52  『小小菜鸟』  阅读(1888)  评论(0编辑  收藏  举报