draw empty mx:grid flex programmatically

Question

I want to draw 2*2 mx:Grid and put a button on any one of these cells which will be calculated dynamically. So I want to create an empty 2*2 grid, and replace any one cell with the button.

-----------------
|        |       |
------------------
|        |  btn  |
------------------

How do I accomplish this?

Answer 1

You need to create grid and keep references to the cells (instances of GridItem ). Consider following code as a part of some class.

private var cells:Array = [];

private function addGrid(parent:DisplayObjectContainer):void {
    var grid:Grid = new Grid();
    var row1:GridRow = new GridRow();
    grid.addChild(row1);
    var cell11:GridItem = new GridItem();
    row1.addChild(cell11);
    var cell12:GridItem = new GridItem();
    row1.addChild(cell12);
    cells.push(new Array(cell11, cell12));
    var row2:GridRow = new GridRow();
    grid.addChild(row2);
    cell21 = new GridItem();
    row2.addChild(cell21);
    var cell22:GridItem = new GridItem();
    row2.addChild(cell22);
    cells.push(new Array(cell21, cell22));
    parent.addChild(grid);
}

cells is two-dimensional array, which can be used to access the cells you need to change. You can use Vector class instead of Array . I've used Array only because of shorter code.