我正在使用 flex 4.5。我想创建 Gauge 组件 Datagrid。
我正在使用开源 com.betterthantomorrow.components。我创建了这样的自定义组件
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:bttc="com.betterthantomorrow.components.*"
xmlns:gauge="com.betterthantomorrow.components.gauge.*"
xmlns:objects="tekhnia.com.tekhniag.objects.*"
width="30%" height="65" backgroundColor="black" borderColor="black"
creationComplete="init(event)">
<fx:Declarations>
<mx:NumberFormatter precision="1" id="formatter" rounding="nearest" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.messaging.channels.StreamingAMFChannel;
[Bindable]
public var cpuValue:Number;
[Bindable]
public var memoryValue:Number;
[Bindable]
public var diskValue:Number;
[Bindable]
public var mycomp:String;
[Bindable]
public var serverName:String;
[Bindable]
public var statusImage:String;
protected function init(event:FlexEvent):void
{
var strValues:String;
var strColors:String;
var strAlphas:String;
strColors="0x009900,0xFFFF00,0xDD0000";
strValues="0,50,70,100";
strAlphas=".8,.8,.8"
var values:Array=strValues.split(",");
var colors:Array=strColors.split(",");
var alphas:Array=strAlphas.split(",");
gauge1.setStyle("alertValues",values);
gauge1.setStyle("alertColors",colors);
gauge1.setStyle("alertAlphas",alphas);
gauge2.setStyle("alertValues",values);
gauge2.setStyle("alertColors",colors);
gauge2.setStyle("alertAlphas",alphas);
gauge.setStyle("alertValues",values);
gauge.setStyle("alertColors",colors);
gauge.setStyle("alertAlphas",alphas);
gauge.invalidateDisplayList();
gauge1.invalidateDisplayList();
gauge2.invalidateDisplayList();
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
<bttc:Gauge id="gauge"
diameter="50" width="50"
verticalCenter="0" horizontalCenter="-111"
minValue="1" maxValue="10" value="{cpuValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
</s:TileGroup>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
<bttc:Gauge id="gauge1"
diameter="50" width="50"
verticalCenter="0" horizontalCenter="-111"
minValue="1" maxValue="10" value="{memoryValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white" automationName="T"/>
</s:TileGroup>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
<bttc:Gauge id="gauge2"
diameter="50" width="50"
verticalCenter="0" horizontalCenter="-111"
minValue="1" maxValue="10" value="{diskValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
</s:TileGroup>
<s:TileGroup width="40" paddingTop="3">
<s:Image source="assets/led/big/{statusImage}" />
<s:Label color="white" text="{serverName}" textAlign="center"/>
</s:TileGroup>
</s:BorderContainer>
我想在 Datagrid 中添加这个组件。我在网上尝试了很多。我没有找到任何帮助。我也看书。
请帮帮我。我在网站某处找到了一个线性答案:编写网格渲染器。我不知道如何编写网格渲染器并将数据值传递给它。
我将更加感谢有人给我指向示例网格渲染器或代码的指针。
最佳答案
请检查这是否对您有帮助。您可以将它们放在不同的列中,并提供适当的数据提供程序,而不是使用您的自定义组件将所有三个仪表放在一起。您也可以完全实现您想要的,但是您必须在组件中相应地处理您作为数据提供者传递的数据。以下方法似乎更简单。
<mx:DataGrid id="yourGrid"
height="388" width="663"
dataProvider="{yourDP}"
>
<mx:columns>
<mx:DataGridColumn headerText="Type" width="80">
<mx:itemRenderer>
<mx:Component>
<bttc:Gauge id="gauge1" diameter="50" width="50" verticalCenter="0" horizontalCenter="-111" minValue="1" maxValue="10" value="{cpuValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false"
pointerColor="white" automationName="T"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Type" width="80">
<mx:itemRenderer>
<mx:Component>
<bttc:Gauge id="gauge2" diameter="50" width="50" verticalCenter="0" horizontalCenter="-111" minValue="1" maxValue="10" value="{memoryValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false"
pointerColor="white" automationName="T"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Type" width="80">
<mx:itemRenderer>
<mx:Component>
<bttc:Gauge id="gauge3" diameter="50" width="50" verticalCenter="0" horizontalCenter="-111" minValue="1" maxValue="10" value="{diskValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false"
pointerColor="white" automationName="T"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Type" width="80">
<mx:itemRenderer>
<mx:Component>
<s:Image source="assets/led/big/{statusImage}" />
<s:Label color="white" text="{serverName}" textAlign="center"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
另一种方法是将整个组件作为项目渲染器从上方获取提示:
<mx:DataGrid id="yourGrid"
height="388" width="663"
dataProvider="{yourDP}"
>
<mx:columns>
<mx:DataGridColumn headerText="Type" width="80">
<mx:itemRenderer>
<mx:Component>
<someNameSpace:YourComponent cpuvalue={cpuValue} diskValue={diskValue}/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
这里还有一点要说明的是,如果分配给 dataGrid 的数据提供者具有所有值,那么在您的组件中您可以像访问 data.variableName 一样访问它们:
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
<bttc:Gauge id="gauge"
diameter="50" width="50"
verticalCenter="0" horizontalCenter="-111"
minValue="1" maxValue="10" value="{data.cpuValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
</s:TileGroup>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
<bttc:Gauge id="gauge1"
diameter="50" width="50"
verticalCenter="0" horizontalCenter="-111"
minValue="1" maxValue="10" value="{data.memoryValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white" automationName="T"/>
</s:TileGroup>
<s:TileGroup width="101" paddingLeft="20" paddingRight="2">
<bttc:Gauge id="gauge2"
diameter="50" width="50"
verticalCenter="0" horizontalCenter="-111"
minValue="1" maxValue="10" value="{data.diskValue}" valueFormatter="{formatter}"
bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
</s:TileGroup>
<s:TileGroup width="40" paddingTop="3">
<s:Image source="assets/led/big/{statusImage}" />
<s:Label color="white" text="{data.serverName}" textAlign="center"/>
</s:TileGroup>
在这种情况下,您可以按如下方式将组件作为项目渲染器传递:
<mx:DataGrid dataProvider="{yourDP}" >
<mx:columns>
<mx:DataGridColumn itemRenderer="com.somePath.yourComponent"/>
</mx:columns>
</mx:DataGrid>
希望对您有所帮助。
关于apache-flex - 在 flex 4.5 或 flex 4 中的 Datagrid 或 AdvancedDataGrid 中呈现仪表或 UI 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7692340/