update column width advanceddatagird on focus in FLEX?

Question

I have combobox in an advanceddatagrid, and i want that when the user clicks on the current column, the column gets wider and when the user gets the other column does the same and the previous one when loses focus gets the default value

I'm reading 'bout focusIn but I can't find a good example...

Does anybody, any ideas?

Answer 1

Well I can tell you how to resize a column whose items have been clicked. I'm sure there is an easier way to do this...

Give your datagrid an item click event:

<mx:AdvancedDataGrid
     name="datagrid"
     id="datagrid"
     width="50%"
     columns="{columnsArr}"
     dataProvider="{dataProv}"
     itemClick="resizeCol(event)"
    />

public function resizeCol(event:ListEvent):void
        {
            //The new width for the column which has been clicked
            var newColumnWidth:Number = 300;
            //Calculate the width to resize the other columns to; width of the datagrid 
            //divided by how many columns are in the DG (minus the one we are resizing)
            //Then, subtracted by half the width of the column we are resizing
            var equalColWidth:Number = Math.floor(this.datagrid.width / (this.datagrid.columns.length -1));
            equalColWidth -= (newColumnWidth/2);
            //Grab the column to resize from the event object
            var column:AdvancedDataGridColumn = this.datagrid.columns[event.columnIndex] as AdvancedDataGridColumn;

            //Loop columns, make the column which will change to the new width, 
            //Make the other columns equal in size.
            for each(var col:AdvancedDataGridColumn in this.datagrid.columns)
            {
                if(col == column)
                {
                    column.width = newColumnWidth;
                }
                else
                {
                    col.width = equalColWidth;
                }
            }

        }