i have a itemrenderer that is contain:
<s:TextInput x="10" y="41" width="60" name="txtprice"/>
and i want to access to this field from outside.
how can i do this?
You can do something like this:
<s:List id="list" itemRenderer="com.myDomain.myProject.MyRenderer" />
<s:Button label="click me" click="onButtonClick()"/>
<fx:Script>
<![CDATA[
import mx.core.IVisualElement;
protected function button1_clickHandler(event:MouseEvent):void
{
var myRenderer:CustomItemRenderer = list.dataGroup.getElementAt(0) as CustomItemRenderer;
}
]]>
</fx:Script>
Since itemRenderers are usually recycled, an itemRenderer is not created for an element that is off screen. That is, if your list has 20 elements, and only the first 10 are visible, getElementAt() will return null if you try to get the 11th-20th elements. If you scroll the element into view, the renderer is created/recycled, and then you can retrieve it.
I seem to recall a better way of dealing with this, but it's not coming to mind.
Note there is another method: list.dataGroup.getVirtualElementAt() but this seems to behave the same for me as the non-virtual method.
Finally, be sure to assign the TextInput in your renderer an idso you can reference it after you retrieve the renderer:
<s:TextInput id="txtprice" />
Related
I have an AdvancedDataGrid with two columns that have item renderers. Those item renderers are rendering link buttons in their respective columns. I want to be able to click on those link buttons without triggering the itemClick event of the AdvancedDataGrid. Any suggestions for how I could accomplish this?
I've never worked with an AdvancedDataGrid but I assume a few principles hold. The first being the behavior of event propagation. The event gets processed by the button before it gets processed by the grid. This means that we can catch and stop the event from ever reaching the DataGrid. Below is a code sample demonstrating how a DataGrid renderer can have a Button without triggering other behavior.
CustomerRenderer...
<fx:Script>
<![CDATA[
protected function watchButtonClickHandler(event:MouseEvent):void
{
//the line below stops the event from
//propagating through the rest of the display
//list
event.stopImmediatePropagation();
//handle button click logic here
}
]]>
</fx:Script>
<s:Group width="100%" id="buttonGroup">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"
paddingBottom="1" paddingLeft="1"
paddingRight="1" paddingTop="1" />
</s:layout>
<s:Button id="watchButton" width="98" label="{buttonLabel}"
click="watchButtonClickHandler(event)"/>
</s:Group>
....
Hi I am trying to pass the rowindex when I click on a button in a row, the data value returns the correct information but the rowIndex returns nothing.
<mx:AdvancedDataGridColumn headerText="EDIT" showDataTips="false" editable="true">
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="center" verticalAlign="middle">
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, rowIndex)}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
thanks !
I'm surprised you're provided code does not throw an error.
You need to access listData.rowIndex. listData should be an instance of the AdvancedDataGridListData class.
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, listData.rowIndex)}"/>
Since the HBox does not have a listData property, you may have to implement it on your own for the data to be passed in. Something like this should suffice:
[Bindable]
public var listData:BaseListData;
It has been a while since I've been deep into an MX component, so my memory is a bit rusty on the last part.
In addition to the first answer, try not to use listData.rowIndex when your datagrid has the vertical scroll bar, because the rowIndex just shows the index of current visible Rows.
Try to use the current object index in the DataProvider of the datagrid instead.
I want to add a button with a cross to the header of the accordion which can be clickable. that means i want to display a message when the some one click on that button. i go through many of the samples in the web but couldn't get it done. if any one who knows do this in flex4 it will very helpful.
I tried with also a CanvasButtonAccordionHeader, it shows the button but when i click it, it didn't give the message although i created the click event handler.
if somebody know how to resolve this please describe it with a simple source code.
thanx.
You can easily do that by customizing the header in CSS.
Add the header Style to you accordion.
<mx:Accordion id="accordion"
headerStyleName="accHeader"
width="100%" />
In your CSS
.accHeader {
fillColors: haloSilver, haloBlue;
fillAlphas: 1.0, 0.5;
selectedFillColors: black, black;
}
Or embed your image in here.
You can place that message in your ViewStack.
I use the CanvasButtonAccordionHeader in Flex 3, so not sure if this will work in Flex 4.
But.... in case it's of any use, I create my CanvasButtonAccordianHeader as a custom componant which dispatches an event when the button is clicked:
<CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*"
xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true"
<mx:Script>
<![CDATA[
[Bindable]
private var itemName:String;
public function init():void{
itemName=data.name;
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="homeButtonClicked")]
</mx:Metadata>
<mx:HBox width="100%" horizontalAlign="right" height="100%"
paddingRight="5"
verticalAlign="middle">
<mx:LinkButton label="<>"
click="dispatchEvent(new Event('homeButtonClicked'));"
/>
</mx:HBox>
</CanvasButtonAccordionHeader>
Then I instantiate the custom componant at the bottom of the Accordian as a Header Renderer:
............................................
<mx:headerRenderer>
<mx:Component>
<applicationLayout:AccordionNavHeaderRenderer
homeButtonClicked="outerDocument.dispatchEvent(new Event('homeClick'))"/>
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
Hope this is of use.
I'm having this weird behaviour in a datagridColumn which I've customized to have its cells rendered as checkBoxes rather than the dafault itemRenderer (i.e. strings). The relevant code is as follows:
<mx:DataGridColumn sortable="false" textAlign="center" headerText="" width="20" dataField="colCB">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="true">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function change():void{
//TODO
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Well, what happens is that whenever I check a checkbox, other checkboxes (in other rows) get randomly checked or unchecked, and if I scroll down or up they once again randomly get selected or unselected.
Can anybody help me with this one?
Thanks is advance
PS by the way, I've suppressed the starting "<" in the tags because it was messing with the textEditor, but in my code they're there
My guess is that the issue isn't that the checkboxes are getting randomly checked and unchecked. The DataGrid recycles its itemRenderers for better memory performance. What's likely happening is that you're checking a CheckBox on an itemRenderer and start scrolling, that itemRenderer with the checked box is getting reused to display other records with the selected="true" value still set.
What I would do is create an itemRenderer component and override the set data method to set the checkbox's selected value to what it should be.
Some sample code off the top of my head for the itemRenderer (you'll want to adjust it for your use):
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
if (value["myCheckBoxData"] != null)
{
myCheckBox.selected = Boolean(value["myCheckBoxData"]);
}
validateDisplayList();
}
]]>
</fx:Script>
<mx:CheckBox id="myCheckBox" />
</mx:HBox>
Within a DataGrid, I have a DataGridColumn that uses a custom component as the item renderer. Within the component, I have an ArrayCollection that stores a set of value objects. My problem is that I cannot access the ArrayCollection values from outside of the item renderer component. Does anyone know how it would be possible to do this? I have posted a code snippet below.
<mx:Script>
<![CDATA[
// Cannot access arrFiles from here.
]]>
</mx:Script>
<mx:DataGrid editable="true">
<mx:columns>
<mx:DataGridColumn id="dgcUpload" width="130" headerText="Uploaded Files"
editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Script>
<![CDATA[
[Bindable]public var arrFiles:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Is this possible?
Thank you in advance for any assistance,
Orville
I would create a custom MXML Box component as the rendered with a label (myLabel) as a child. Set the data provider for the DataGrid to the array. In the custom MXML component override the set data method which is called each time the data is rendered for each row and set the label to the current value passed in:
override public function set data(value:Object):void{
myLabel.text = value.myTextForLabel;
}
If the field in the ArrayCollection (myArrayCollection) is always the same for the label, then just set the DataGrid data provider to the ArrayCollection and the dataField property of the column to the appropriate value (myText):
<mx:DataGrid editable="true" dataProvider="myArrayCollection">
<mx:columns>
<mx:DataGridColumn id="dgcUpload" width="130" dataField="myText" headerText="Uploaded Files"
editable="false">
</mx:columns>
</mx:DataGrid>
It is possible depending on how you want to access it. You can access the property of a specific item being rendered by the itemRenderer by calling the itemToItemRenderer function on the datagrid. That gives you an instance of that specific itemRenderer and you can call the arrFiles variable for that item.
Here's an example
protected function datagrid1_clickHandler(event:MouseEvent):void
{
var obj:Object = dgcUpload.itemToItemRenderer(dgcUpload.selectedItem);
var newArray:ArrayCollection = obj.arrFiles;
}
I call that when something is clicked on the DataGrid and I want to access the arrFiles variable for the selected item.
Is that what you're looking for?
=Ryan