Flex - 将参数发送到自定义ItemRenderer?

时间:2009-02-09 16:17:09

标签: flex itemrenderer

我想要实现的目标是使我的Flex Datagrid中的财务数据采用颜色编码 - 如果正面则为绿色;红色,如果它是负面的。如果我想要着色的列是dataProvider的一部分,这将是相当简单的。相反,我基于作为dataProvider一部分的另外两列来计算它。这仍然相当简单,因为我可以在ItemRenderer中再次计算它,但计算的另一部分是基于textBox的值。所以,我认为我需要做的是将textBox的值发送到自定义ItemRenderer,但由于该值存储在主MXML应用程序中,我不知道如何访问它。将其作为参数发送似乎是最好的方式,但也许还有另一种方式。

以下是我的ItemRenderer的当前代码:

package {
import mx.controls.Label;
import mx.controls.listClasses.*;

public class PriceLabel extends Label {
    private const POSITIVE_COLOR:uint = 0x458B00 // Green
    private const NEGATIVE_COLOR:uint = 0xFF0000; // Red 

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        /* Set the font color based on the item price. */
        setStyle("color", (data.AvailableFunding >= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
    }
}

(data.AvailableFunding不存在)

所以有人知道如何实现这个目标吗?

10 个答案:

答案 0 :(得分:35)

您可能希望从Flex API中查看ClassFactory

这允许您设置具有任意类型/值的原型Object,每个类型/值都将传递给项呈示器。来自样本:

var productRenderer:ClassFactory = new ClassFactory(ProductRenderer);
productRenderer.properties = { showProductImage: true };
myList.itemRenderer = productRenderer;

上面的代码假设“ProductRenderer”有一个名为“showProductImage”的公共属性,它将设置为值“true”。

答案 1 :(得分:1)

啊,所以我知道outerDocument但不知道parentDocument。我能够使用parentDocument。*无论我想从主应用程序中得到什么,只要它是公开的,我就可以访问它。

示例:

setStyle("color", (parentDocument.availableFunding >= 0) ? POSITIVE_COLOR : NEGATIVE_COLOR);

甜! :)

答案 2 :(得分:1)

如果需要,可以使用静态Application.application对象直接访问TextBox的值,该对象可从应用程序的任何位置访问。

例如,如果您希望在TextInput控件的值发生更改时通知渲染器,则可以执行以下操作(在ItemRenderer中,并且myTextInput是在中定义的控件的ID您的主要MXML类):

<mx:Script>
    <![CDATA[

        import mx.core.Application;

        private function creationCompleteHandler(event:Event):void
        {
            Application.application.myTextInput.addEventListener(TextEvent.TEXT_INPUT, handleTextInput, false, 0, true);
        }

        private function handleTextInput(event:TextEvent):void
        {
            if (event.currentTarget.text == "some special value")
            {
               // Take some action...
            }
        }

    ]]>
</mx:Script>

使用此方法,当TextInput的text属性更改时,将通知每个item-renderer对象,并且您可以根据此时控件的值采取适当的操作。另请注意,在这种情况下,我将useWeakReference参数设置为true,以确保侦听器分配不会无意中干扰垃圾回收。希望它有所帮助!

答案 3 :(得分:0)

我喜欢覆盖项呈示器的set数据功能,以便在数据提供者更改时更改呈现器here

当您覆盖该函数时,您可以将对象强制转换为对象以使availableFunding属性可用。

要访问该文本框,您可以尝试创建公共属性并将该属性绑定到mxml文件中的文本框:

public var textVar:String;

            <mx:itemRenderer>
                <mx:Component>
                    <customrenderer textVar="{txtBox.text}" />
                </mx:Component>
            </mx:itemRenderer>

答案 4 :(得分:0)

Nice ClassFactory示例here

答案 5 :(得分:0)

还有另一种技术,虽然它最初感觉有点笨拙,但在实际使用中可能不那么麻烦和清洁。

它涉及一个鲜为人知的事实,即事件调度当然是同步的,事件对象可以被视为由任何事件处理程序填充的值对象。

即。 ItemRenderer可以执行以下操作:

  ...
  var questionEvt:DynamicEvent = new DynamicEvent('answerMeThis', true, true);
  if (dispatchEvent(questionEvt))
  {
      if (questionEvent.answer == "some value")
      ....

在渲染器上方的视图层次结构的某个位置使用相应的处理程序,该渲染器在事件上具有侦听器并执行以下操作:

function handleAnswerMeThis(event:DynamicEvent):void
{
     event.answer = "another value";
     event.dataHelper = new DataHelperThingy();
}

它不一定是一个DynamicEvent - 我只是用于懒惰的说明目的。

答案 6 :(得分:0)

我投票赞成cliff.meyers' answer

这是通过构建一个围绕itemRenderer类包装ClassFactory并注入必要属性的函数,从MXML设置itemRenderer属性的另一个示例。

静态功能:

public static function createRendererWithProperties(renderer:Class,
properties:Object ):IFactory {
  var factory:ClassFactory = new ClassFactory(renderer); 
  factory.properties = properties;
  return factory;
}

为列表中的每个项添加工具提示的简单示例:

<mx:List dataProvider="{['Foo', 'Bar']}" itemRenderer="{createRendererWithProperties(Label, {toolTip: 'Hello'})}"/>

参考:
http://cookbooks.adobe.com/post_Setting_the_properties_of_an_itemRenderer_from_MXM-5762.html

答案 7 :(得分:0)

您使用outerDocument属性。请参阅the fx:Component reference

答案 8 :(得分:0)

您可以在ItemRenderer中创建一个'AvailableFunding'静态变量,然后在父文档中设置它。

public class PriceLabel extends Label {
    public static var availableFunding:int;
    ...
    ...
    SetStyle("color", (PriceLabel.availableFunding >= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
}

在您的父文档中,在文本框更新后进行设置

PriceLabel.availableFunding = textBox.text;

显然每个ItemRenderer的值都是相同的,但看起来这可能就是你正在做的事情。

答案 9 :(得分:0)

见这个例子:

itemRenderer =&#34; {UIUtils.createRenderer(TextBox,{iconSrc:IconRepository.linechart,headerColor:0xB7D034,subHeaderColor:0xE3007F,textColor:0x75757D})}&#34;