Ultima revisión 28/07/2010

Filas de un datagrid de altura variable

Hoy vamos a ver cómo realiar un datagrid con campos largos, que no entrarían en una fila. Por ejemplo un texto descripción de 300 caracteres.

<mx:AdvancedDataGrid id="urlsDataGrid" width="99.99%" height="100%" dataProvider="{dpUrlsList}" styleName="Urls" variableRowHeight="true" verticalAlign="middle">
     <mx:columns>
        <mx:AdvancedDataGridColumn dataField="icono" headerText="" width="62" minWidth="62">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image maintainAspectRatio="true" brokenImageSkin="{null}" brokenImageBorderSkin="{null}" horizontalAlign="center" />
                </mx:Component>
            </mx:itemRenderer>
         </mx:AdvancedDataGridColumn>
        <mx:AdvancedDataGridColumn width="200" textAlign="left" dataField="nombre" headerText="Nombre" />
        <mx:AdvancedDataGridColumn textAlign="justify" dataField="descripcion" headerText="Descripción" wordWrap="true" />
        <mx:AdvancedDataGridColumn dataField="url" headerText="" visible="false" />
        <mx:AdvancedDataGridColumn dataField="id"  headerText="" visible="false" />
    </mx:columns>
</mx:AdvancedDataGrid>

Lo primero, es decir que dpUrlsList es una arrayCollection que priviene de un XML creado desde PHP y que tiene la siguiente estructura:

var obj:Object= {"id":item.@id, "nombre": item.@nombre, "descripcion":item.@descripcion, "icono":item.@icono, "url":item.@url};

variableRowHeight="true" verticalAlign="middle"

son para el asunto entre manos, para poder manejar la altura de la fila dinámica e independiente por filas y su alineación.

Y por último, en el AdvancedDataGrid, en la columna del campo "Descripcion" ponemos el parámetro wordWrap="true" que provoca que si la longitud del campo es mayor que la longitud de la columna, se provoque un salto de línea.