Повернуть заголовки таблицы на 90 градусов

[olevacho]

Нужно чтоб заголовки таблицы были повернуты на 90 градусов. В следующем коде я попробовал реализовать но результат не совсем удовлетворительный. Заголовки вылазят за пределы ячейки и таблицы. Не помогает манипулирование свойствами x и y HeaderRenderer-а. Как решается такая проблема?

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
 
import fl.controls.dataGridClasses.HeaderRenderer;
 
var dp:DataProvider = new DataProvider();
dp.addItem({data:"gr1", title:"choice1"});
dp.addItem({data:"gr21", title:"choice2"});
dp.addItem({data:"gr3", title:"choice3"});
dp.addItem({data:"gr4", title:"choice4"});
dp.addItem({data:"gr5", title:"choice5"});
var myDataGrid:DataGrid = new DataGrid();
 
var col1:DataGridColumn = new DataGridColumn("data");
var col2:DataGridColumn = new DataGridColumn("title");
 
var hd1:HeaderRenderer=new HeaderRenderer();
var hd2:HeaderRenderer=new HeaderRenderer();
 
hd1.rotationZ=90;
hd2.rotationZ=90;
 
 
col1.headerRenderer=hd1;
col2.headerRenderer=hd2;
myDataGrid.addColumn(col1);
myDataGrid.addColumn(col2);
myDataGrid.dataProvider = dp;
myDataGrid.rowHeight = 164;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length - 1;
myDataGrid.move(10, myDataGrid.width+10);
addChild(myDataGrid);

[bicubic_bublic]

Предлогаю решение проблемы написанием своего headerRenderer'а к примеру следующим образом:

package  {
 
	import fl.controls.dataGridClasses.HeaderRenderer;
 
	import flash.text.AntiAliasType;
	import flash.text.GridFitType;
	import flash.text.TextFieldAutoSize;
 
	public class VHeaderRenderer extends HeaderRenderer{
 
		public function VHeaderRenderer() {
			super();
 
			textField.rotation = -90;
			//поворачиваем надпись против часовой стрелки на 90 градусов
			//rotation поддерживается только для embed (встроеных в swf) шрифтов
			//следовательно:
			textField.embedFonts = true;
			textField.antiAliasType = AntiAliasType.ADVANCED;
			textField.gridFitType = GridFitType.PIXEL;
 
			textField.autoSize = TextFieldAutoSize.LEFT; 
 
		}
 
		override protected function drawLayout():void {
 
			super.drawLayout();
 
			var txtPad:Number = Number(getStyleValue("textPadding")); //расстояние до краев
			var txtW:Number = textField.textHeight + 4; //высота нормального или ширина повернутого
			textField.x = Math.round((width - txtW) / 2); //центрируем по горизонтали
			textField.y = height - txtPad; //прижимаем к низу
 
			if (icon != null) { //иконку переместим наверх
				icon.x = Math.round((width - icon.width) / 2);
				icon.y = txtPad;
			}
 
		}
 
	}
 
}

Теперь просто

 // dataGrid:DataGrid
dataGrid.setStyle("headerRenderer", VHeaderRenderer);
dataGrid.headerHeight = 100;

Однако не забываем, что шрифт надо включить во флешку. Существует ряд способов это сделать (например добавлением в нее текстового поля типа "Dynamic Text" или "Input Text" с каким-то шрифтом (пусть будет Arial) и настройкой "Character Embedding..."

Далее указываем выбранный шрифт для отрисовки заголовков:

dataGrid.setStyle("headerTextFormat", new TextFormat('Arial'));

upd: в приложении данная реализация в действии

[olevacho]

Спасибо. А че за зверь такой drawLayout? Что то его нету в списке защищенных методов HeaderRenderer???

[bicubic_bublic]

Сообщение от olevacho

Спасибо. А че за зверь такой drawLayout? Что то его нету в списке защищенных методов HeaderRenderer???

отрисовка после ресайза
должен быть вроде