4
如何使用Flex Spark Data Grid for Flex 4.5顯示多行列標題？如何使用Flex Spark Data Grid顯示多行列標題？
A
回答
1
嘗試使用以下方式定製headerRenderer：
<s:DataGrid>
<s:columns>
<s:ArrayList>
<s:GridColumn headerRenderer="MyRenderer" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
與單行標題樣品渲染器可以在這裏{flex4.5 SDK root}/frameworks/projects/spark/src/spark/skins/spark/DefaultGridHeaderRenderer.mxml的基礎上。
3
要在Constantiner的答覆擴大，你必須創建一個自定義HeaderRenderer並設置Label的maxDisplayedLines爲2。這裏是一個sample renderer I found：
MyRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2010 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!---
The DefaultGridHeaderRenderer class defines the default header renderer
for the columns of a Spark DataGrid control.
<p>Subclasses defined in MXML can redefine the values of the <code>labelDisplay</code>
and <code>sortIndicator</code> properties.</p>
@see spark.components.DataGrid
@see spark.components.GridColumnHeaderGroup
@see spark.components.gridClasses.GridItemRenderer
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<s:GridItemRenderer minWidth="21" minHeight="21"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!--- The default value of the <code>sortIndicator</code> property.
It must be an IFactory for an IVisualElement.
<p>This value is specified in a <code>fx:Declaration</code> block and can be overridden
by a declaration with <code>id="defaultSortIndicator"</code>
in an MXML subclass.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<fx:Component id="defaultSortIndicator">
<s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("symbolColor");
arrowFill1.color = color;
arrowFill2.color = color;
}
]]>
</fx:Script>
<s:fill>
<s:RadialGradient rotation="90" focalPointRatio="1">
<!--- @private -->
<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
<!--- @private -->
<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
</s:RadialGradient>
</s:fill>
</s:Path>
</fx:Component>
<!--- Displays the renderer's label property, which is set to the column's <code>headerText</code>.
It must be an instance of a <code>TextBase</code>, like <code>s:Label</code>.
<p>This visual element is added to the <code>labelDisplayGroup</code> by the renderer's
<code>prepare()</code> method. Any size/location constraints specified by the labelDisplay
define its location relative to the labelDisplayGroup.</p>
<p>This value is specified with a <code>fx:Declaration</code> and can be overridden
by a declaration with <code>id="labelDisplay"</code>
in an MXML subclass.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<s:Label id="labelDisplay"
verticalCenter="1" left="0" right="0" top="0" bottom="0"
textAlign="start"
fontWeight="bold"
verticalAlign="middle"
maxDisplayedLines="2"
showTruncationTip="true" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.gridClasses.IGridVisualElement;
import mx.core.IVisualElement;
import spark.components.DataGrid;
import spark.components.GridColumnHeaderGroup;
import spark.components.gridClasses.GridColumn;
/**
* @private
*/
private function dispatchChangeEvent(type:String):void
{
if (hasEventListener(type))
dispatchEvent(new Event(type));
}
//----------------------------------
// maxDisplayedLines
//----------------------------------
private var _maxDisplayedLines:int = 1;
[Bindable("maxDisplayedLinesChanged")]
[Inspectable(minValue="-1")]
/**
* The value of this property is used to initialize the
* <code>maxDisplayedLines</code> property of this renderer's
* <code>labelDisplay</code> element.
*
* @copy spark.components.supportClasses.TextBase#maxDisplayedLines
*
* @default 1
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
*/
public function get maxDisplayedLines():int
{
return _maxDisplayedLines;
}
/**
* @private
*/
public function set maxDisplayedLines(value:int):void
{
if (value == _maxDisplayedLines)
return;
_maxDisplayedLines = value;
if (labelDisplay)
labelDisplay.maxDisplayedLines = value;
invalidateSize();
invalidateDisplayList();
dispatchChangeEvent("maxDisplayedLinesChanged");
}
//----------------------------------
// sortIndicator
//----------------------------------
private var _sortIndicator:IFactory;
private var sortIndicatorInstance:IVisualElement;
[Bindable("sortIndicatorChanged")]
/**
* A visual element that's displayed when the column is sorted.
*
* <p>The sortIndicator visual element is added to the <code>sortIndicatorGroup</code>
* by this renderer's <code>prepare()</code> method. Any size/location constraints
* specified by the sortIndicator define its location relative to the sortIndicatorGroup.</p>
*
* @default null
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
*/
public function get sortIndicator():IFactory
{
return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
}
/**
* @private
*/
public function set sortIndicator(value:IFactory):void
{
if (_sortIndicator == value)
return;
_sortIndicator = value;
if (sortIndicatorInstance)
{
sortIndicatorGroup.includeInLayout = false;
sortIndicatorGroup.removeElement(sortIndicatorInstance);
sortIndicatorInstance = null;
}
invalidateDisplayList();
dispatchChangeEvent("sortIndicatorChanged");
}
/**
* @private
* Create and add the sortIndicator to the sortIndicatorGroup and the
* labelDisplay into the labelDisplayGroup.
*/
override public function prepare(hasBeenRecycled:Boolean):void
{
super.prepare(hasBeenRecycled);
if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))
{
labelDisplayGroup.removeAllElements();
labelDisplayGroup.addElement(labelDisplay);
}
const column:GridColumn = this.column;
if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup)
{
const dataGrid:DataGrid = column.grid.dataGrid;
const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;
if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex))
{
if (!sortIndicatorInstance)
{
sortIndicatorInstance = sortIndicator.newInstance();
sortIndicatorGroup.addElement(sortIndicatorInstance);
}
// Initialize sortIndicator
sortIndicatorInstance.visible = true;
const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
if (gridVisualElement)
gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);
sortIndicatorGroup.includeInLayout = true;
sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
}
else
{
if (sortIndicatorInstance)
{
sortIndicatorGroup.removeElement(sortIndicatorInstance);
sortIndicatorGroup.includeInLayout = false;
sortIndicatorInstance = null;
}
}
}
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="down" />
</s:states>
<!-- layer 1: shadow -->
<!--- @private -->
<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0" />
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.hovered="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.hovered="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<!--- @private -->
<s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<!--- @private -->
<s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.hovered="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.hovered="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<!--- @private -->
<s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" alpha.hovered="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.hovered="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<!--- @private -->
<s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- @private -->
<s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="1" includeIn="down">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:HGroup left="7" right="7" top="5" bottom="5" gap="8" verticalAlign="middle">
<s:BitmapImage source="54.gif" />
<!-- layer 7: Container for labelDisplay:TextBase -->
<!--- Defines the size and location of the labelDisplay visual element.
<p>The <code>labelDisplay</code> is added to this Group by the renderer's
<code>prepare()</code> method. Any size/location constraints
specified by the labelDisplay
define its layout relative to the labelDisplayGroup.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<s:Group id="labelDisplayGroup" width="100%" />
<!-- layer 8: Container for sortIndicator:IVisualElement -->
<!--- Defines the size and location of the sortIndicator visual element.
<p>The <code>sortIndicator</code> is added to this Group by the renderer's
<code>prepare()</code> method. Any size/location constraints specified
by the sortIndicator
define its layout relative to the sortIndicatorGroup. This Group is only
included in the layout when the sortIndicator is visible.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
-->
<s:Group id="sortIndicatorGroup" includeInLayout="false" />
</s:HGroup>
</s:GridItemRenderer>
而且然後在你的DataGrid中使用它，只需按照Constantiner的例子：
<s:DataGrid>
<s:columns>
<s:ArrayList>
<s:GridColumn headerRenderer="MyRenderer" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
1
我看不到headerRenderer GridColumn屬性在我使用的sdk中，所以我無法接受其他答案。這裏是我的解決辦法：
MultiLineColumnHeaderRenderer.mxml：
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
import spark.components.supportClasses.GridColumn;
]]>
</fx:Script>
<s:TextArea editable="false" text="{(data as GridColumn).headerText}" />
</s:ItemRenderer>
與數據網格視圖的初始化函數：
public function init():void{
dataGrid.columnHeaderBar.firstItemRenderer = new ClassFactory(MultiLineColumnHeaderRenderer);
dataGrid.columnHeaderBar.itemRenderer = new ClassFactory(MultiLineColumnHeaderRenderer);
}
而且在headerText爲使用的GridColumn ：
<s:GridColumn headerText="Line1 Line2 Line2"/>
+0
很高興你知道了。我的原始答案中實際上有' '這一塊，並將其編輯出來。大聲笑 – 2011-04-13 21:33:39
0
您必須這樣做： - 創建一個定製的SparkDatagrid皮膚，創建一個默認的副本 - 創建一個定製的DataGrid HeaderRenderer - 只需創建一個新的GridItemRenderer（A），並將新的GridItemRenderer（A）中的默認DataGridHeaderRenderer的代碼放入A中的標籤「labelDisplay」並將其屬性「maxDisplayedLines」從1更改爲2 - 現在返回給您自定義Spark Satagrid Skin並搜索「headerRenderer」組件。 -replace它與您的自定義GridItemRender的實例（A）
它的工作對我來說...希望將這樣做對你
MARCO
1
充分利用DataGridSkin的副本，並將其放置在您的源代碼中。然後編輯線路154本 -
<fx:Component id="headerRenderer">
<s:DefaultGridHeaderRenderer maxDisplayedLines="2"/>
</fx:Component>
希望這有助於
豐富
0
或者，
，如果你不希望創建一個新的渲染只是1個propertie，你可以只設置propertie這樣的：
...
<s:GridColumn width="100" dataField="myDataField" headerText="myHeaderText">
<s:headerRenderer>
<fx:Component>
<s:DefaultGridHeaderRenderer maxDisplayedLines="2" />
</fx:Component>
</s:headerRenderer>
</s:GridColumn>
...
，如果你看一下0123中的代碼組件，你會發現當它被設置時，它會改變標籤中的值DisplayDisplay
但是，如果你有很多列，並且在很長的時間內放置相同的代碼會很無聊，那麼創建一個新組件擴展了火花Datagrid的（或者根據您的需求巢），然後把代碼：
public function set columns(value:IList):void
{
for each (var gridColumn:GridColumn in value.toArray())
{
var headerRenderer:ClassFactory = new ClassFactory(DefaultGridHeaderRenderer);
headerRenderer.properties = {maxDisplayedLines: 2};
gridColumn.headerRenderer = headerRenderer;
}
_columns = value;
}
[Bindable]
public function get columns():IList
{
return _columns;
}
相關問題
- 1. ng-grid - 創建多行列標題
- 2. Flex Grid - ala標題 - 使用md卡
- 3. 列表顯示多行Adobe Flex/Actionscript
- 4. Dojo Data Grid中沒有顯示條目
- 5. Flex - 隱藏DataGrid列和顯示標題和標題文本
- 6. 如何使用Kendo UI Grid Wrapper將列標題跨越2列？
- 7. Winforms Data Grid Scrolling問題
- 8. Angular UI Grid如何顯示單個列的多個字段
- 9. 顯示列標題作爲日期Telerik Rad Grid
- 10. 使用Flex 4.5.1的Spark DataGrid中不顯示滾動條，但顯示爲4.6
- 11. 如何使用wijmo flex grid獲取選定行值
- 12. Flex 4.6 Spark標籤不能正確顯示泰語
- 13. Silverlight Grid突出顯示行和列
- 14. 顯示行值作爲列標題
- 15. 如何使用腳本顯示Kendo Grid的列菜單
- 16. 如何使用Telerik Grid組件顯示內容項目列表
- 17. 如何使用ng grid在AngularJS中實現原始標題和列標題
- 18. ng-grid顯示每個列標題的兩個箭頭排序圖標
- 19. AngularJS - ui-grid - 數據顯示問題
- 20. 如何在Flex 3.2中顯示徽標？
- 21. Spark DataGrid多行標題渲染器
- 22. Kendo UI Grid - 顯示行號
- 23. Flex TextArea - 如何突出顯示光標下的行/行？
- 24. Ag-grid顯示行數
- 25. 關於spark數據網格標題的Flex工具提示
- 26. Flex 4.5 Spark Datagrid多列排序
- 27. Flex Spark Combobox在主組合框區域顯示圖標？
- 28. 如何使用syncfusion在多個頁面上顯示標題
- 29. IKImageBrowserView可以顯示多行標題嗎？
- 30. ListFieldIterator顯示[「標題」列值]
這不是在星火DataGrid的工作:( – Constantiner 2011-04-13 20:45:47
@Constantiner，我完全錯過了有關使用部分* Spark *數據網格。猜猜我將不得不回到繪圖板！ :) – 2011-04-13 20:53:41
好吧，我已經回去並更新了我的答案。 :) – 2011-04-13 21:10:43