How to put form items in view stack in flex?, so that i can get selected form item through one comboBox
<mx:ComboBox id="cb">
<mx:dataProvider>
<mx:Array>
<mx:String>Label-1</mx:String>
<mx:String>Label-2</mx:String>
<mx:String>Label-3</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:ViewStack id="vs" selectedIndex="{cb.selectedIndex}">
<mx:FormItem label="Label-1">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Label-2">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Label-3">
<mx:TextInput/>
</mx:FormItem>
</mx:ViewStack>
Related
I have to add * mark for required fields in my application. I have done this by the code
<mx:VBox>
<mx:Form>
<mx:FormItem label="Name" required="true">
<mx:TextInput id="Name" width="200" editable="true"/>
</mx:FormItem>
<mx:FormItem label="priority" required="true">
<mx:ComboBox id="priorityId" width="200" cornerRadius="4" dataProvider="{customerPriorityList}" />
</mx:FormItem>
</mx:Form>
<mx:VBox>
but the problem is that the * mark comes near the text input field or near the combo box. But i want that * mark near the label only as per my application.
I tried my best but failed.
Is there any way???
Thanks in advance...
try this one
<mx:Form width="30%">
<mx:HBox horizontalGap="0">
<mx:Label text="First Name"/>
<mx:Label width="11" color="0xFF0000" text="*"/>
<mx:Spacer width="20"/>
<mx:TextInput/>
</mx:HBox>
</mx:Form>
<mx:List columnCount="5" rowCount="11" width="100%" height="100%" dataProvider="{parentDocument.crewPositionsAC}" useRollOver="false" alternatingItemColors="[0xffffff, 0xe5e5e5]" borderStyle="none">
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data}" color="#840021" selectable="false" />
<mx:ComboBox id="studentType">
<mx:ArrayCollection>
<mx:String>BFA1</mx:String>
<mx:String>BFA2</mx:String>
<mx:String>BFA3</mx:String>
<mx:String>MFA1</mx:String>
<mx:String>MFA2</mx:String>
<mx:String>MFA3</mx:String>
<mx:String>MFAw1</mx:String>
<mx:String>MFAw2</mx:String>
<mx:String>MFAw3</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
When I try to save it, I get the error:
Parse error at '<mx:ComboBox>'.
Anybody able to see what's causing the error?
You can only have a single component defined as an in-line itemRenderer. You have two defined, a Text and a ComboBox. The solution is to wrap them up in a container. I used an HBox for the purposes of demonstration.
<mx:List columnCount="5" rowCount="11" width="100%" height="100%" dataProvider="{parentDocument.crewPositionsAC}" useRollOver="false" alternatingItemColors="[0xffffff, 0xe5e5e5]" borderStyle="none">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Text text="{data}" color="#840021" selectable="false" />
<mx:ComboBox id="studentType">
<mx:ArrayCollection>
<mx:String>BFA1</mx:String>
<mx:String>BFA2</mx:String>
<mx:String>BFA3</mx:String>
<mx:String>MFA1</mx:String>
<mx:String>MFA2</mx:String>
<mx:String>MFA3</mx:String>
<mx:String>MFAw1</mx:String>
<mx:String>MFAw2</mx:String>
<mx:String>MFAw3</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
for some reason my code is not having the desired effect of having labels to the left of the textinput fields*(like in nearly all normal scenarios with forms). The labels are appearing above the textinput fields. I would also like to make some of them read only. Any advice much appreciated
Basically what i have is text sitting above the textbox instead of alongside it to the left.
Here is my code:
<mx:VBox width="100%" height="100%">
<mx:HBox>
<mx:FormItem textAlign="left" <mx:Label text="TEST" textAlign="left" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right"/> </mx:FormItem>
Use the label field of the formitem.
<mx:FormItem textAlign="left" label="TEST" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right">
</mx:FormItem>
If you want read-only, then you can put editable="true|false" in the TextInput.
In flex form layout
<mx:Form id="form">
<mx:FormItem label="horizontal:">
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
the output will be
horizontal 'test'
But my constraint is i want to align the textbox(first child of the form item ) vertically with the label. How can i do this ?Any inputs invited
You could override the form / formitem class to change the layout approach by overriding updateDisplayList method.
You could also try something like this:
<mx:Form id="form">
<mx:FormItem direction="vertical">
<mx:Label text="horizontal:"/>
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
For Spark-Forms it works differently. Take a look at this very good description: https://opensource.adobe.com/wiki/display/flexsdk/Spark+Form
From the source above:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#stackedForm s|FormItem
{
skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");
}
</fx:Style>
<s:Form id="stackedForm">
<s:FormItem label="Address" sequenceLabel="1." required="true" >
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:helpContent>
<s:Label text="(ex. 123 Main Street)" baseline="24"/>
<s:Button label="?" width="30" baseline="24" x="120"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="City" sequenceLabel="2." required="true">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem label="State" sequenceLabel="3.">
<s:ComboBox dataProvider="{statesDP}" width="100%"/>
</s:FormItem>
<s:FormItem label="ZipCode" sequenceLabel="4." required="true">
<s:TextInput widthInChars="4" restrict="0123456789"/>
<s:helpContent>
<s:Label text="Will appear in your profile" left="0" right="0" baseline="24"/>
</s:helpContent>
</s:FormItem>
</s:Form>
i want to populate a horizontalList component from a xml file, the width value will be inside the xml file as well with all the data.
actually i have this code:
<mx:Model id="epg" source="epg.xml" />
<mx:Component id="customRend">
<mx:Label text="{data.description}" width="{data.width}"/>
</mx:Component>
<mx:HBox x="82" y="104" width="1203" height="113" verticalAlign="middle">
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}"
itemRenderer="{customRend}" horizontalScrollPolicy="off">
</mx:HorizontalList>
</mx:HBox>
but it sets same width for all elements in the list.
Do you know how to do this?
Thanks a lot.
Br
Two ways to do this:
Set label.width = data.width on creationComplete
Wrap Label in Canvas
The creationComplete way (probably because an itemRenderer should be a Container?):
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}" horizontalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component id="customRend">
<mx:Label text="{data.description}" creationComplete="this.width = data.width"/>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
... or wrapped in Canvas:
<mx:HorizontalList width="100%" dataProvider="{epg.channel.program}" horizontalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component id="customRend">
<mx:Canvas horizontalScrollPolicy="off">
<mx:Label text="{data.description}" width="{data.width}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
Hope that helps,
Lance