Подогнать сетку данных Flex к данным
У меня есть строки текстовых данных, которые могут варьироваться от 0 до 100, и все они должны быть видны на экране одновременно. Поведение по умолчанию подходит для сетки до тех пор, пока строки * rowHeight> gridHeight не будут отображаться.
В основном мне нужен крючок для высоты элемента или высоты строки, чтобы рассчитать ее на основе высоты сетки. Я установил paddingTop и paddingBottom равным нулю, но между строками по-прежнему остается значительное количество пробелов.
Мой компонент 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 () помогает, но itemRender для ячейки больше, чем ячейка, если я установил высоту строки примерно на 10.
Ответы 2
Возможно, вы захотите посмотреть на свойство DataGrid.variableRowHeight, поскольку, когда для него установлено значение false (по умолчанию), все строки будут иметь ту же высоту, что и самый большой itemRenderer. Вы также можете написать свой собственный itemRenderer для каждого DataColumn.
Если все, что вы действительно хотите сделать, это установить высоту строки на основе количества элементов в dataProvider, вы можете просто установить свойство DataGrid.rowHeight следующим образом (при условии, что ваша сетка имеет фиксированную высоту, скажем 100%):
myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);
(Я беру слово здесь, потому что, если вы получите дробное значение, которое округляется в большую сторону, вам понадобится полоса прокрутки)
Единственная проблема с этим подходом, как я думаю, вы заметили, заключается в том, что itemRenderer может некорректно отображаться в слишком маленькой строке. Я думаю, вы могли бы решить эту проблему, изменив шрифт в рендерере в зависимости от его высоты.
Спасибо, inferis, это мне очень помогло. Это мой последний компонент сетки. Он не совсем самодостаточен из-за нескольких обращений, но если это поможет кому-то другому заставить их работать, отлично!
<?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>