Search Flex Components Free

Custom Search

December 20, 2007

Flex Control DataGrid Update, Add, Delete Source Code Sample

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" backgroundAlpha="0" creationComplete="srv.send()">
<mx:Script>
import mx.collections.ArrayCollection;
[Bindable] public var employees:ArrayCollection;
private function addRow():void { if (frmName.text != "") employees.addItem( {name: frmName.text, email: email.text, phone: phone.text} ); }
private function updateRow():void { if (dg.selectedIndex != -1) employees.setItemAt({name: frmName.text, email: email.text, phone: phone.text}, dg.selectedIndex); }
private function deleteRow():void { if (dg.selectedIndex != -1) { employees.removeItemAt(dg.selectedIndex); frmName.text=""; email.text=""; phone.text=""; } }
</mx:Script>
<mx:HTTPService id="srv" url="../assets/employees.xml" useProxy="false" result="employees = new ArrayCollection(srv.lastResult.list.employee)"/>
<mx:HBox width="100%" height="100%">
<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{employees}"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> </mx:Array> </mx:columns> </mx:DataGrid>
<mx:Form width="100%" height="100%"> <mx:FormItem label="Name"> <mx:TextInput id="frmName" width="200" text="{dg.selectedItem.name}"/> </mx:FormItem> <mx:FormItem label="Email"> <mx:TextInput id="email" width="200" text="{dg.selectedItem.email}"/> </mx:FormItem> <mx:FormItem label="Phone"> <mx:TextInput id="phone" width="200" text="{dg.selectedItem.phone}"/> </mx:FormItem> <mx:FormItem> <mx:HBox> <mx:Button label="Update" click="updateRow()"/> <mx:Button label="Add" click="addRow()"/> <mx:Button label="Delete" click="deleteRow()"/> </mx:HBox> </mx:FormItem> </mx:Form>
</mx:HBox>
</mx:Application>

Related Flex Tutorials