how to access the parent application property inside item renderer

0
votes

I have a datagrid which has 3 columns in main application. In the third column I want to use the item renderer where I want to use hbox which has two components inside it. One is a button and one is a label. I also have a slider in the main application. I want to change the alpha of the button of itemrenderer from the main application file using the slider, where the datagrid is used. I can access the data provider properties inside the item renderer using data property. But how do I access the parent application properties. For this I tried to create custom datagrid and passed the value of slider using data binding. But could not access the property. In a list when I did the same thing, I could access the property using listData property of item renderer, but in case of datagrid I couldn't do so.

2
apache-flexcustom-componentitemrenderer

2 Answers

1
votes

how do I access the parent application properties

Generally; I would recommend you don't. An itemRenderer should be able to access all the properties it needs through the data element; which relates to the dataProvider.

It is a break in encapsulation to access properties of components that are higher up in the display hierarchy.

That said, there are a lot of ways to this.

To access the main application you can use FlexGlobals.topLevelApplication to access the top level application.

You can store your slider value as a static variable and access it from the itemRenderer that way.

You could store the slider value in some data/model object and use a Dependency Injection Framework (Such as Swiz or Robotlegs) to inject that data/model object into your itemRenderer.

1
votes

if you want to access a outside property, you can use outerDocument inside of itemRenderer, for example:

//Code

        public var str:String = "Test";
        [Bindable] private var arr:Array = [
            {field:'ROW1'},
            {field:'ROW2'},
            {field:'ROW3'}                 
        ];

//MXML

<mx:DataGrid id="grid" width="100%" height="100%" dataProvider="{arr}">
    <mx:columns>
        <mx:DataGridColumn dataField="field">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{data.field + ' ' + outerDocument.str}"/>
                </mx:Component> 
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

This URL shows a good example of what I said. I hope it will be helpful.