Sunday, November 2, 2008

Flash dataGrid component

Why not just use a DataGrid component? They're pretty easy to use actually.
Try this: start a new AS2 project and drag a DataGrid from the components
panel onto the stage. Use the properties panel to size it to 500 x 300. When
you add data to a grid it will just show a scroll bar if necessary, it
doesn't resize... Give it an instance name of "theGrid".

Now, add the following script to the frame:

import mx.controls.gridclasses.DataGridColumn;

function doGrid(gridRef, gArray:Array)
for (var i = 0; i < gArray.length; i++) {
var cat:DataGridColumn = new DataGridColumn(gArray[i][0]);
cat.width = gArray[i][2];
cat.headerText = gArray[i][1];
cat.editable = false;


var gFormat = new Array(["fname", "First Name:", 120], ["lname", "Last
Name:", 200], ["date", "Win Date:", 80]);
doGrid(theGrid, gFormat);

If you compile now, you'll see the grid with the field titles... I use the
doGrid function, and an array like this to make formatting the grid easy.
The first item in the array matches the dataProvider property, as you will
see in a moment - the second is the title, and the third the width of the
column... change these as you need.

To add data, you just create an array of objects, with the object properties
matching the first item in the format array - like so - add the following
and test again:

var gridData = new Array({fname:"Dave", lname:"Mennenoh", date:"09/14/08"},
{fname:"giga", lname:"saurus", date:"10/14/08"});

theGrid.dataProvider = gridData;

That's all there is to it... If you add more data than can be shown, you'll
get a scroll bar. You can add en event listener to know when someone selects
an item, etc...

No comments: