Flex 學習筆記 Datagrid中建立自訂ComboBox控制項及數字校正

列表某列如何設定成下拉框，如何?數字校正，可通過下面代碼實現

：

 

 

View Code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>    
    <fx:Declarations>
        <!-- 將非可視元素（例如服務、值對象）放在此處 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.DataGridEvent;
            
            private var dpFormula:ArrayCollection=new ArrayCollection([
                {NAME:"AA",OPERATOR:">",OVALUE:5},
                {NAME:"BB",OPERATOR:">=",OVALUE:9},
                {NAME:"CC",OPERATOR:"<",OVALUE:6}
            ])
            protected function btnsave_clickHandler(event:MouseEvent):void
            {
                for(var i:Number=0;i<dpFormula.length;i++){        
                    if(dpFormula[i].OVALUE==""){
                        Alert.show("請輸入演算法值");
                        return;
                    }
                    if(!isNumber(dpFormula[i].OVALUE)){
                        dgFormula.editedItemPosition={ columnIndex:2, rowIndex:i};
                        return
                    }
                }
                //校正完畢，可進行儲存處理
            }
            
            private function isNumber(value:String):Boolean{            
                var num:Number=Number(value);
                if(num.toString()=="NaN"){
                    return false;    
                }
                else{
                    return true;
                }                
            }

        ]]>
    </fx:Script>

    
    <mx:DataGrid id="dgFormula" dataProvider="{dpFormula}" width="300" height="200" editable="true" >
        <mx:columns>
            <mx:DataGridColumn dataField="NAME" headerText="中文名" editable="false"/>
            <!--內部渲染  編輯時呈現ComboBox控制項-->
            <mx:DataGridColumn dataField="OPERATOR" headerText="運算子" editorDataField="value" >                        
                <mx:itemEditor>
                    <fx:Component>
                        <mx:VBox verticalGap="0" width="100%" height="100%" verticalAlign="middle">
                            <fx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    [Bindable]
                                    public var arrmark:ArrayCollection=new ArrayCollection([
                                        {lable:">"},
                                        {lable:">="},
                                        {lable:"="},
                                        {lable:"<"},
                                        {lable:"<="},
                                    ]); 
                                    
                                    public function get value():Object{
                                        if(cbxMark.selectedItem == null){
                                            return null;
                                        }
                                        var obj:Object=cbxMark.selectedItem;
                                        return obj.lable;
                                    }
                                    override public function set data(value:Object):void{
                                        super.data = value;
                                        //給combobox賦初始值
                                        for each(var obj:Object in arrmark){
                                            if(obj.lable==value.OPERATOR){
                                                cbxMark.selectedItem = obj;
                                                break;
                                            }
                                        }
                                    }
                                ]]>
                            </fx:Script>
                            <s:ComboBox id="cbxMark" labelField="lable" dataProvider="{arrmark}" 
                                        width="100%" height="100%" />
                        </mx:VBox>
                    </fx:Component>
                </mx:itemEditor>                
            </mx:DataGridColumn>
            <!--內部渲染  編輯時呈現TextInput控制項-->
            <mx:DataGridColumn dataField="OVALUE" headerText="值"  editorDataField="value" >
                <mx:itemEditor>
                    <fx:Component>
                        <mx:VBox verticalGap="0" width="100%" height="100%" verticalAlign="middle">
                            <fx:Declarations>
                                <mx:NumberValidator id="numVal" source="{txtvalue}" property="text"
                                                    allowNegative="true" domain="real" invalidCharError="請輸入數字"/>
                            </fx:Declarations>
                            <fx:Script>
                                <![CDATA[
                                    public function get value():Object{
                                        return txtvalue.text;
                                    }
                                    override public function set data(value:Object):void{
                                        super.data = value;
                                        txtvalue.text=value.OVALUE;
                                    }
                                ]]>
                            </fx:Script>
                            <s:TextInput id="txtvalue" width="100%" height="100%" change="numVal.validate()"  />
                        </mx:VBox>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
    <s:Button id="btnsave"  label="儲存" click="btnsave_clickHandler(event)"/>
</s:Application>