Working with Flex and Datagrids

Creating a Basic Data Grid

Flex provides anMXML tag to create a DataGrid. Here is our application, with the DataGrid colored in blue:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html"> <mx:DataGrid></mx:DataGrid>
</mx:Application>

The basics of a Flex application are present: the XML DTD, namespace attribute and the <mx:Application> tag. Most importantly for this lesson, you also see the DataGrid tag. If you compile and run this program you will see the following:

What you see is a DataGrid with no header and no data items. It is very basic so far. Before we continue on to spruce up this DataGrid, let's make it expand to the width our browser. By doing this, when we re-size our window, the datagrid will grow to the width and height of the web browser. Here is an updated version of the DataGrid tag with our size attributes added:

Try resizing your window to see the effects of our changes. Setting the width and height to "100%" tells Flex that this component should grow as large as it possibly can with reference to its parent container. In this case, the parent is the application, which also takes up as much real estate as possible.