flex_form-grid增删改示例;

<?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" pageTitle="form-grid增删改示例">
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.ListEvent;
            
            [Bindable]
            public var arrayForGrid:ArrayCollection = new ArrayCollection([
                {thename:"唐龙", thebirthday:"2012-03-07", thecontact:"15077107397", theemail:"tl@lf23.com"},
                {thename:"楚源", thebirthday:"2012-03-07", thecontact:"15077107397", theemail:"11@lf23.com"}
            ]);
            
            /**
             * 说明：标识是否是新增状态，默认新增；
             */
            public var isCreate:Boolean = true;
            
            /**
             * 说明：当前编辑的第几个数组元素，默认没有；
             */
            public var arrayNum:int = 0;
            
            /**
             * 函数：为datagrid添加数据；
             */
            protected function submit_clickHandler(event:MouseEvent):void
            {
                
                // 姓名字段为空不添加。
                if(thename.text == "") {
                    Alert.show("姓名不能为空！", "提醒框");
                    trace("=>值为空，不能添加数据；");
                    return;
                }
                
                trace("=>开始处理数据；");
                // 添加数据。
                var person:Object = {};
                person.thename = thename.text;
                person.thebirthday = thebirthday.text;
                person.thecontact = thecontact.text;
                person.theemail = theemail.text;
                
                if(isCreate) {    // 新增状态。
                    arrayForGrid.addItem(person);
                    
                } else { // 编辑状态。
                    trace("=>编辑数据");
                    
                    // 删除原来的记录，在此index插入修改后的数据。
                    arrayForGrid.removeItemAt(arrayNum-1);
                    arrayForGrid.addItemAt(person, arrayNum-1);
                }
                
                // 调用重置按钮方法。
                this.reset_clickHandler();
            }
            
            /**
             * 函数：重置表单控件；
             */
            protected function reset_clickHandler():void
            {
                // 重置表单控件状态。
                thename.text = "";
                thebirthday.text = "";
                thecontact.text = "";
                theemail.text = "";
                arrayNum = 0;
            }
            
            /**
             * 函数：为表单各个控件赋值；
             * parameter: event_mx.events.ListEvent;
             */
            protected function dgrid_changeHandler(event:ListEvent):void
            {
                // 获取array的index值。
                var arrayel:Object = event.target.selectedItem;
                arrayNum= arrayForGrid.getItemIndex(arrayel)+1;
                
                if(event.target.selectedItem.thename) {
                    isCreate = false;
                }
                
                // 为表单各控件赋值。
                thename.text = event.target.selectedItem.thename;
                thebirthday.text = event.target.selectedItem.thebirthday;
                thecontact.text = event.target.selectedItem.thecontact;
                theemail.text = event.target.selectedItem.theemail;
            }
            
            protected function delBtn_clickHandler(event:MouseEvent):void
            {
                if(arrayNum==0) {
                    Alert.show("请先选择要删除的信息！", "提醒框");
                    return;
                }
                arrayForGrid.removeItemAt(arrayNum-1);
                
                // 状态恢复。
                this.reset_clickHandler();
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    
    <s:Panel title="form-grid" verticalCenter="0" horizontalCenter="0" width="750" height="350">
        <s:Scroller width="100%" height="100%">
            <s:Group>
                <s:layout>
                    <s:HorizontalLayout useVirtualLayout="true"/>
                </s:layout>
                
                <s:VGroup paddingLeft="30" paddingTop="23" height="100%">
                    <mx:Grid width="100%">
                        <mx:GridRow>
                            <mx:GridItem width="120">
                                <s:Label text="人物姓名" fontWeight="bold"/>
                            </mx:GridItem>
                            <mx:GridItem width="120">
                                <s:Label text="出生日期" fontWeight="bold"/>
                            </mx:GridItem>
                            <mx:GridItem width="120">
                                <s:Label text="联系方式" fontWeight="bold"/>
                            </mx:GridItem>
                        </mx:GridRow>
                        
                        <mx:GridRow>
                            <mx:GridItem>
                                <s:Label text="唐龙"/>
                            </mx:GridItem>
                            <mx:GridItem>
                                <s:Label text="2012-04-03"/>
                            </mx:GridItem>
                            <mx:GridItem>
                                <s:Label text="15077107397"/>
                            </mx:GridItem>
                        </mx:GridRow>
                    </mx:Grid>
                    
                    <mx:DataGrid id="dgrid" dataProvider="{arrayForGrid}" width="100%"
                                 change="dgrid_changeHandler(event)">
                        <mx:columns>
                            <mx:DataGridColumn dataField="thename" headerText="人物名称"/>
                            <mx:DataGridColumn dataField="thebirthday" headerText="出生日期" textAlign="center"/>
                            <mx:DataGridColumn dataField="thecontact" headerText="联系方式"/>
                            <mx:DataGridColumn dataField="theemail" headerText="邮箱地址"/>
                        </mx:columns>
                    </mx:DataGrid>
                </s:VGroup>
                
                <s:VGroup height="100%">
                    <s:Form>
                        <s:FormHeading width="245" label="人物信息" fontWeight="bold"/>
                        <s:FormItem label="TheName" width="245">
                            <s:TextInput id="thename" width="150" />
                        </s:FormItem>
                        
                        <s:FormItem label="TheBirthday" width="245">
                            <mx:DateField id="thebirthday" maxYear="{new Date().fullYear}" formatString="YYYY-MM-DD" width="150"/>
                        </s:FormItem>
                        
                        <s:FormItem label="TheContact" width="245">
                            <s:TextInput id="thecontact"  width="150"/>
                        </s:FormItem>
                        
                        <s:FormItem label="TheEmail" width="245">
                            <s:TextInput id="theemail" width="150"/>
                        </s:FormItem>
                        
                        <s:HGroup width="245" horizontalAlign="right" verticalAlign="middle">
                            <s:Button id="submit" label="保存" click="submit_clickHandler(event)"/>
                            <s:Button id="delBtn" label="删除" visible="true" click="delBtn_clickHandler(event)"/>
                            <s:Button id="reset" label="取消" click="reset_clickHandler()"/>
                        </s:HGroup>
                    </s:Form>
                </s:VGroup>
                
            </s:Group>
        </s:Scroller>
    </s:Panel>
    
</s:Application>