Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Chapter 4. Flex Controls and Layout > Data Grids
4.9. Data Grids
We regularly have to build tables of structured information. This is easy in Flex, thanks to two controls: the DataGrid and the AdvancedDataGrid. I’ll start by showing the DataGrid control (see Example 4-11).
Example 4-11. Datagrid.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:XMLList id="employees">
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>ccoenraets@fictitious.com</email>
<active>true</active>
</employee>
...
</mx:XMLList>
<mx:DataGrid width="100%" height="100%" dataProvider=
"{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
</mx:Application> |
When I run this in Flex Builder I see Figure 4-11.
Figure 4-11. A simple data grid
You don’t even have to define the columns in the DataGrid unless you want to. The DataGrid control is smart enough to detect the columns from the data and set itself up if you haven’t defined the columns.
The AdvancedDataGrid is just like the DataGrid but with a more powerful set of features. For example, it has the ability to roll up sections of the data and provide users with spinners so that they can drill down into the data.
Example 4-12 shows AdvancedDataGrid in action.
Example 4-12. Advgrid.mxml
Code View:
Scroll
/
Show All <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
{Region:"Southwest", children: [ ... ]}
]);
]]>
</mx:Script>
<mx:AdvancedDataGrid width="100%" height="100%">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
|
When I run this in the browser and click around a little bit I get something similar to Figure 4-12.
Figure 4-12. The advanced data grid
As with any control, you can use the itemRenderer functionality in Flex Builder to format each cell however you choose.
4.9.1. In-Place Editing
The DataGrid control also allows for editing cell contents in place. Example 4-13 shows just how easy this is.
Example 4-13. Edit_table.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:XMLList id="customers" xmlns="">
<customer><first>Jack</first>
<last>Herrington</last></customer>
<customer><first>Lori</first>
<last>Herrington</last></customer>
<customer><first>Megan</first>
<last>Herrington</last></customer>
</mx:XMLList>
<mx:DataGrid dataProvider="{customers}" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="first" />
<mx:DataGridColumn dataField="last" />
</mx:columns>
</mx:DataGrid>
</mx:Application> |
All I needed to do was add the editable attribute to the DataGrid and set it to true.
When I bring this up in the browser and double-click on a cell, I see something similar to Figure 4-13.
Figure 4-13. The editable grid
Of course, to make the example functional I would need to listen to the editing events and update the backend data store to match.
By default, the DataGrid uses a text editor to edit the cell contents, but you can provide your own editor renderer to use whatever controls you like to edit the value in the cell.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint