I have an an array of objects that I use as the datasource for my repeater.
<mx:Repeater id="categoryRepeater" dataProvider="{this.allCategories}">
<mx:HBox>
<mx:Spacer width="20"/>
<mx:CheckBox id="categoryCheckBox" label="{categoryRepeater.currentItem.question}"/>
</mx:HBox>
</mx:Repeater>
I would like to be able to tell which of the checkboxes in the list have been checked, but I'm not sure how to do it. I know I can add a function when it's clicked, but I don't know how to tell which checkbox called the function.
Use the currentIndex property.
I realize that this is a very old post, but I had run into the same issue and the currentIndex was not a sufficient answer for me. What I found to work better was to create a function on click:
<mx:Repeater id="rp" dataProvider="{dp}">
<s:CheckBox height="100%" width="100%" label="{String(rp.currentItem)}"
click="showAlert(event);"/>
</mx:Repeater>
and the showAlert function looks something like this:
private function showAlert(evt:MouseEvent):void {
var curBox:CheckBox = evt.currentTarget as CheckBox;
var str:String = curBox.content.toString();
if(curBox.selected)
Alert.show(str + " clicked");
}
This way you can deal with the event as a CheckBox inside of your ActionScript code and find values such as whether or not it has been selected etc.
Related
I have one datgrid with no. of columns like:
<s:DataGrid id="cpDataGrid" dataProvider="{arrList}">
<s:columns>
<mx:ArrayList>
<mx:source>
<s:GridColumn headerText="Name" dataField="name" editable="false"/>
<s:GridColumn headerText="Age" datafield="age" editable="false"/>
<s:GridColumn headerText="Test" dataField="test" editable="false" />
<s:GridColumn width="100" headerText="Result" dataField="result" >
</mx:source>
</mx:ArrayList>
</s:columns>
</s:DataGrid>
In the above datagrid result column is editable. I have make function when user done entering value in that column as following:
protected function onCreationCompleteHandler(event:FlexEvent):void
{
cpDataGrid.addEventListener(GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_SAVE, onSave);
}
private function onSave(event:GridItemEditorEvent):void
{
var name:String = event.currentTarget.selectedItem.name;
}
Now, I will get name and other field value when edit end. But i need Result text. Means Whatever user entered text in that field.
Like suppose user enter 50 in result column then how can i got that value?
Any help will greatly appreciated.
For spark.DataGrid you need to create custom class based on spark.DataGrid and override method endItemEditorSession. In it you can access DataGrid's property itemEditorInstance.
If you would use mx.DataGrid, you could use DataGridEvent.ITEM_EDIT_END event in combination with itemEditorInstance property of DataGrid.
// register listener
cpDataGrid.addEventListener(DataGridEvent.ITEM_EDIT_END, onItemEditEnd);
...
// listener
private function onItemEditEnd(event:DataGridEvent):void {
// at this point itemEditorInstance is still available, so you can get entered value from it
// if itemEditorInstance is TextInput
var enteredValue:String = TextInput(cpDataGrid.itemEditorInstance).text;
}
I coded the following in Flex 4/AS3 and it doesn't worked as expected.
So, I would like to know if there is something wrong with my code... I'll explain it:
TileTest.mxml
<s:Application minWidth="955" minHeight="600" creationComplete="createButtons()"
<fx:Script>
<![CDATA[
import Object.TestButton;
import mx.collections.ArrayList;
private var _names:Array = ["one", "two", "three"];
public function createButtons():void
{
var buttons:ArrayList = new ArrayList();
for(var a:int = 0; a < _names.length; a++)
{
var testButton:TestButton = new TestButton();
testButton.customName = _names[a];
buttons.addItem(testButton);
}
myList.dataProvider = buttons;
}
]]>
</fx:Script>
<s:VGroup gap="12" width="100%">
<s:Label text="Options" fontSize="18" fontWeight="bold" color="#333333" />
<s:List width="100%" height="100%" id="myList" itemRenderer="Object.TestButton" borderVisible="false">
<s:layout>
<s:TileLayout orientation="rows" columnWidth="290" rowHeight="90" columnAlign="left" horizontalGap="0" verticalGap="0" />
</s:layout>
</s:List>
</s:VGroup>
</s:Application>
This is my Application. Here, I have a List called myList, where I load some TestButtons. I set a name for each button inside the loop.
TestButton
<s:Group width="300" height="90" click="{ Alert.show(_name); }"
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private var _name:String = "just a test...";
public function set customName(newName:String):void
{
_name = newName;
Alert.show(_name);
this.addEventListener(MouseEvent.MOUSE_OVER, function():void{ Alert.show(_name); });
}
]]>
</fx:Script>
<s:BorderContainer accentColor="#000000" width="100%" height="100%" />
</s:Group>
As you can see, I have three Alerts in this component... I did so we can understand the problem.
The first Alert occurs when I set the customName, which occurs in the Application, as already shown.
The second one should occur on Mouse_Over, as the event listener been added to the Group element.
And the third Alert should occur on Click in the Group element.
Now, if I run the resulting swf, I see all the three buttons in the screen and three Alerts, one for each set customName by the Application and it alerts the right name.
If I put the mouse over any button, it doesn't alert any message.
If I click any button, it alerts the default message set to the _name property, which is "just a test..."
I can't understand what is the problem, as I was expecting it to always alert the name set by the Application to each button. Also, I don't want to change the components... what I'm saying is that I would like to have a List and TestButtons with a private String inside.
If the problem is in these specific implementation, so I'll have no other way than change it...
Thank you all!
The problem is that you have a list of TestButtons in your data provider, instead of just plain data. Those buttons get created, and that is why you see the correct Alert messages.
So, then Flex sees a list with three items and therefore it creates three additional TestButtons to render the data in your list. But those TestButtons are completely new ones, with default values for its properties.
To fix this, it would be better if you had data only in your data provider ArrayList, and you would access it through the data property of your item renderer.
I'm using Flex 4.6 and have a AIR application
I have a Panel with many labels on it. I need to access these labels from another class.
I don't want to pass all the labels objects. so I thought about passing the panel container in then access the labels through the getElementByName() method.
Here is my mark up:
<s:VGroup includeIn="SLA_textView" width="100%" height="100%"
paddingBottom="10" paddingRight="10">
<s:Panel id="SlaTextViewPanel" width="100%" height="100%"
title="test View">
<s:Label id="lbTotalBooks" name="test" x="82" y="62" />
</s:Panel>
</s:VGroup>
the actionscript code look like this:
getLabels(Container:Panel){
var _Container:Panel = Container;
//var tempLabel:Label = _Container.getChildByName("test") as Label;
var n:int = _Container.numChildren;
for (var i:int = 0; i < n; i++) {
var c:DisplayObject = _Container.getChildAt(i);
trace(c.name);
}
var tempLabel:Label = _Container.getChildByName("test") as Label;
Why is tempLabel always null?
So I tried to loop through the name of the object on the Panel and the test label don't even show up? so I have something wrong somewhere.
Trace:
instance1333
PanelSkin1074
When and where do you call a getLabels method? It's possible that labels have been created but not initialized yet.
You can use something like this:
var element:Group = "searchId" in this ? this["searchId"] as Group : null;
I am creating a Flex3 app to return some results from the Google Geocoding API.
I am using the HTTPService Events sample from TourDeFlex as a reference guide to mimic.
For now, I have hardcoded the response from Google to use this XML response:
maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false
Network Monitor suggests that I am getting a valid response from the XML, but I imagine I have not referenced it correctly for populating my DataGrid?
I have screencasted the issue here.
Here is a stripped down version of my code:
private function resultHandler(event:ResultEvent):void
{
results = event.result.GeocodeResponse.result;
}
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultDetail, "Error");
}
]]>
</mx:Script>
<mx:HTTPService id="srv"
url="http://maps.googleapis.com/maps/api/geocode/xml?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false"
result="resultHandler(event)"
fault="faultHandler(event)"/>
<mx:TitleWindow title="Find" showCloseButton="true" close="closeMe();"
styleName="formPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="400" height="200">
<mx:DataGrid dataProvider="{results}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="type" headerText="Address"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Go" height="20" styleName="buttonGo" click="srv.send()"/>
</mx:TitleWindow>
Had a look at the xml. It could be that the first occurance of type is at a top level, but from then on type is an element of address_component.
Maybe try address_component.type as the datafield of the DataGridColumn? Or set the dataprovider to results.address_component?
Edit Update
Because its reading XML, maybe set resultFormat="e4x" inside the <HttpService ..> tag, and have an XMLListCollection awaiting the result:
<mx:XMLListCollection id="xc" source="{srv.lastResult.result}"/>
<mx:DataGrid id="dg" dataProvider="{xc}">
In debug mode, set a watch on XC to make sure its being populated
Working in Flex 3, I have a series of components being rendered on a canvas, each of which should represent a single potential selection, ideally in a RadioButtonGroup. So in my parent canvas I am defining the RadioButtonGroup, and each component provides a single RadioButton. However, this doesn't seem to work.
Suppose there is a component called aComponent defined as such:
<mx:Canvas ...>
...
<mx:RadioButton id="someButton" groupName="myRadioButtonGroup" ... />
</mx:Canvas>
The outer canvas:
<mx:Canvas id="outerCanvas" ...>
...
<mx:Script>
public function doesSomething():void
{
var myComponent:aComponent = new aComponent();
outerCanvas.addChild(myComponent);
}
</mx:Script>
...
<mx:RadioButtonGroup id="myRadioButtonGroup" />
</mx:Canvas>
So my guess was that at this point if, say, four of these components were added, the radio buttons would behave in mutually exclusive fashion and I'd be able to access myRadioButtonGroup.selectedValue to get the current selection. However, it doesn't seem to work that way.
Is what I'm trying to do even possible, or have I maybe just missed something?
Thanks!
Edit - got to the bottom of it:
The radiobuttongroup isn't available to the component. It's parent has 'myRadioButtonGroup', but not the component.. Pass the 'myRadioButtonGroup' to the constructor and use it..
outerCanvas function:
var myComponent:aComponent = new aComponent(myRadioButtonGroup);
aComponent definition:
private var radioGroup:RadioButtonGroup;
function aComponent(radioGroup:RadioButtonGroup):void {
this.radioGroup = radioGroup;
}
</mx:Script>
<mx:RadioButton id="someButton" groupName="radioGroup" ... />
untested, but hopefully gives you the idea