Datagrid in Flex

1.Frisr we start to create new mxml project for flex.
2.name to save dataxml.mxml
3.Usign httpservice we retrive the data & send data to server.
4.for display the data we use datagrid to display the records
5.To display specific fields in datagrid we use the columns to specify the fields to display
6.In httpservice we include the result funciton to retrieve the data in xml
7.paste the code in mxml & run the file.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”  backgroundColor=”#ffffff” layout=”vertical” initialize=”employeeService.send()” >

<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

// Variable to hold the results of the HTTPService call
[Bindable]
private var employeeData:ArrayCollection;

// result event handler for employeeService HTTPService call
private function resultHandler(event:ResultEvent):void {
employeeData = event.result.employees.employee;
trace(“Data load success”);
}

// fault event handler for employeeService HTTPService call
private function faultHandler(event:FaultEvent):void {
// Add code here for what to do when there is an error retrieving data
}

]]>
</mx:Script>

<mx:HTTPService id=”employeeService”
url=”data/employees.xml”
result=”resultHandler(event)”
fault=”faultHandler(event)”/>

<!– DataGrid displaying a subset of the data returned from the call to the server.–>
<mx:DataGrid dataProvider=”{employeeData}”
alternatingItemColors=”[#CCCCCC, #AAAAAA]”>
<mx:columns>
<mx:DataGridColumn dataField=”firstname”
headerText=”First Name” />
<mx:DataGridColumn dataField=”lastname”
headerText=”Last Name” />
<mx:DataGridColumn dataField=”title”
headerText=”Title”
width=”250″ />
<mx:DataGridColumn dataField=”department”
headerText=”department”
width=”250″ />
</mx:columns>
</mx:DataGrid>

</mx:Application>

Advertisements

Posted on November 26, 2009, in Flex and tagged . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: