Fit Flex datagrid dados
-
03-07-2019 - |
Pergunta
Eu tenho linhas de dados de texto que podem variar entre 0 e 100, e todos precisam ser visível na tela ao mesmo tempo. O comportamento padrão é bom para a grade até que as linhas * rowHeight> gridHeight.
Basicamente eu preciso de um gancho na altura item, ou a altura da linha para calculá-lo com base na altura da grade. Eu configurei paddingTop e paddingBottom a zero, mas ainda há uma quantidade considerável de espaço em branco entre as linhas.
Meu componente datagrid ...
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="OnCreationComplete()"
paddingTop="0"
paddingBottom="0"
>
<mx:Script>
<![CDATA[
private function OnCreationComplete():void
{
//setRowHeight(10);
}
override protected function setRowHeight(v:Number):void
{
super.setRowHeight(v);
}
]]>
</mx:Script>
</mx:DataGrid>
setRowHeight () ajuda, mas o itemRender para a célula maior do que a célula, se eu definir a altura da linha para algo como 10.
Solução 2
Obrigado inferis, que me ajudou muito. Este é o meu último componente grid. Não é realmente auto-contido por causa de alguns call-outs, mas se isso ajuda alguém obter deles para o trabalho, ótimo!
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="-3"
paddingBottom="-3"
resize="OnResize(event)"
>
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.core.Application;
import mx.events.ResizeEvent;
protected function OnResize(event:ResizeEvent):void
{
this.invalidateDisplayList();
}
/**
* @private
* Sizes and positions the column headers, columns, and items based on the
* size of the DataGrid.
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
if( this.collection.length > 0 ) // so don't divide by zero
{
var appHeight:Number = Application.application.height;
var appMinusMenuHeight:Number = appHeight - Application.application.hboxPrintBar.height;
var boxHeight:Number = Application.application.vboxViewAll.height;
if( boxHeight > 0 )
{
var gridHeight:Number = (appMinusMenuHeight - this.headerHeight) * 0.93;
var calcHeight:Number = gridHeight / this.collection.length;
var calcHeightFloor:Number = Math.floor( calcHeight );
setRowHeight( calcHeightFloor );
//var p:Panel = this.parent as Panel;
//p.title = calcHeightFloor.toString();
if( calcHeightFloor <= 10 )
this.setStyle("fontSize",calcHeightFloor);
}
}
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
]]>
</mx:Script>
</mx:DataGrid>
Outras dicas
Você pode querer olhar para a propriedade DataGrid.variableRowHeight como, quando esta é definida como false (o padrão) todas as linhas será a mesma altura que a maior itemRenderer. Você também pode olhar para escrever o seu próprio itemRenderer para cada DataColumn.
Se tudo o que você realmente quer fazer é definir a altura da linha com base no número de itens no dataProvider, porém, você poderia apenas definir a propriedade DataGrid.rowHeight como este (supondo que sua rede tem uma altura fixa, digamos, 100%) :
myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);
(estou pegando o chão aqui, porque se você acabar com um valor fracionário que arredonda para cima, você vai precisar de uma barra de rolagem)
O único problema com essa abordagem, como eu acho que você percebeu, é que o itemRenderer pode não exibir corretamente em uma linha que é muito pequeno. Eu acho que você poderia resolver este mudando a pia batismal dentro do processador baseado em sua altura.