Flex: Read values from Repeater - apache-flex

I am using a simple Repeater which has a single component(TextInput).
<mx:Repeater id="myrep" dataProvider="{myAC}" >
<local:TextInputRepeater id="tiRepeater" displaytext="{myrep.currentItem}" />
</mx:Repeater>
<mx:Button label="Get Data" click="getNewValues(event)" />
The repeater has following code:
[Bindable]
public var displaytext:String = "";
<mx:TextInput id="repeatText" text="{displaytext}" change="repeatText_changeHandler(event)"/>
Here is what I want : on click of button in getNewValues function, I want to read the values (user might possibly have changed in the textInputs).

Well, it was a silly issue which I overlooked.
Solution is, tiRepeater[index] will give you the udpated repeater object.

Related

flex return rowIndex from button in datagrid component

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.

Flex 4.6 with itemrenderer with textinput inside

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" />

Binding data to DataGrid through ActionScript

I am trying to bind an ArrayCollection result coming in from the server to my DataGrid
created dynamically in AS.
The result data is not getting Displayed in the Grid.
var dg:DataGrid = new DataGrid();
dg.width=650;
dg.dataProvider=someArrayCollfromServer;
I am adding the dgColumn as runtime based on some data from a XML and it is the same as defined in below static format.
But if I use the same code and create the DataGrid as a Flex Component as below, it works fine.
<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{someArrayCollfromServer}">
<mx:columns>
<mx:DataGridColumn dataField="Value" headerText="Value"/>
<mx:DataGridColumn dataField="Code" headerText="Code" />
</mx:columns>
</mx:DataGrid>
This works fine. Is there some functionality or implementation different as far as DataGrid is concerned in Flex and AS.
Any point of issue here?
dg.dataProvider=someArrayCollfromServer; just assigns the current value of the variable someArrayCollfromServer (which might be null if it hasn't been populated yet) to the dataProvider. To get data binding, replace that line with:
BindingUtils.bindProperty(dg, "dataProvider", this, "someArrayCollfromServer");
And make sure that someArrayCollfromServer is [Bindable]

Is it possible to store an array in a DataGridColumn in Flex?

I have a datagrid column with a button that opens a modal dialog box allowing the user to upload multiple files. In the code below, the browseAndUpload() method does that. When the user finished uploading files and closes the upload box the closeUpload() method is called. I know for a fact that the uploaded files are being copied into arrFiles.
The problem I am having is that the repeater will not show the files in arrFiles. Here is the code:
<mx:DataGridColumn id="dgcUpload" width="42" headerText="Uploaded Files"
editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Script>
<![CDATA[
[Bindable]public var arrFiles:ArrayCollection = new ArrayCollection();
public var fileUpload:FileUpload = new FileUpload();
private function browseAndUpload(event:MouseEvent):void
{
fileUpload = FileUpload(PopUpManager.createPopUp(this, FileUpload, true));
fileUpload.addEventListener(CloseEvent.CLOSE, closeUpload);
fileUpload["btnClose"].addEventListener("click", closeUpload);
}
private function closeUpload(event:Event):void
{
arrFiles = fileUpload.arrFiles;
}
]]>
</mx:Script>
<mx:HBox paddingLeft="3" paddingRight="3">
<mx:Button width="36" label="..." click="browseAndUpload(event)"/>
</mx:HBox>
<mx:Repeater id="rpFiles" dataProvider="{arrFiles}">
<mx:Label text="{FileVO(rpFiles.currentItem).name}"/>
</mx:Repeater>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Thank you in advance for any insight,
Orville
Got it! I made the following changes:
private function closeUpload(event:Event):void
{
arrFiles = fileUpload.arrFiles;
rpFiles.dataProvider = arrFiles;
}
<mx:Repeater id="rpFiles">
<mx:Label text="{FileVO(rpFiles.currentItem).name}"/>
</mx:Repeater>
You are assigning fileUpload.arrFiles directly to arrFiles. Is the former an Array or ArrayCollection? You might need to do arrFiles = new ArrayCollection(fileUpload.arrFiles);
That being said, I hate flex binding and generally avoid it because it can be unreliable. In your case, I'd write my own AS3 component that implements the ItemRenderer and then assign the repeater's dataprovider manually when it changes. You will have more control over the behavior if you do it that way. And a much easier time debugging.

how do I get a handle to a custom component in Flex?

I have a custom login component in Flex that is a simple form that dispatches a custom LoginEvent when a user click the login button:
<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" defaultButton="{btnLogin}">
<mx:Metadata>
[Event(name="login",tpye="events.LoginEvent")]
</mx:Metadata>
<mx:Script>
import events.LoginEvent;
private function _loginEventTrigger():void {
var t:LoginEvent = new LoginEvent(
LoginEvent.LOGIN,
txtUsername.text,
txtPassword.text);
dispatchEvent(t);
}
</mx:Script>
<mx:FormItem label="username:">
<mx:TextInput id="txtUsername" color="black" />
</mx:FormItem>
<mx:FormItem label="password:">
<mx:TextInput id="txtPassword" displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button id="btnLogin"
label="login"
cornerRadius="0"
click="_loginEventTrigger()" />
</mx:FormItem>
</mx:Form>
I then have a main.mxml file that contains the flex application, I add my component to the application without any problem:
<custom:login_form id="cLogin" />
I then try to wire up my event in actionscript:
import events.LoginEvent;
cLogin.addEventListener(LoginEvent.LOGIN,_handler);
private function _handler(event:LoginEvent):void {
mx.controls.Alert.show("logging in...");
}
Everything looks good to me, but when I compile I get an "error of undefined property cLogin...clearly I have my control with the id "cLogin" but I can't seem to get a"handle to it"...what am I doing wrong?
Thanks.
ah! I figured it out...it was a big oversight on mine...it's just one of those days...
I couldn't get the handle on my component because it was not yet created...I fixed this by simply waiting for the component's creationComplete event to fire and then add the event listener.
You can also do something like this I believe:
<custom:login_form id='cLogin' login='_handler' />
You can also do something like this I
believe:
<custom:login_form id='cLogin' login='_handler' />
Minor clarification as there seem to be some confusion in the original code.
Indeed and the reason for this is that a metadata tag has been used to declare the event that is to be made available that way.
<mx:Metadata>
[Event(name="login", type="events.LoginEvent")]
</mx:Metadata>
However, there was no need to add the event metadata when instead of a component "event" property (login='_handler') an event listener was used:
cLogin.addEventListener(LoginEvent.LOGIN,_handler);
addEventListener -> no metadata tag needed
event property in the component tag -> metadata tag required

Resources