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
Related
In my code the datagrid is not fire datachanged event.
can anyone help me to find where I am wrong. for help the code is given below.
<mx:DataGrid id="userlist"
horizontalGridLines="true"
horizontalGridLineColor="0xeeeeee"
dataChange="dataChanged();"
editable="true"
change="changegrid(event);"
width="100%"
height="250" borderColor="#FF0000" borderStyle="solid"
borderThickness="1">
<mx:columns >
<mx:DataGridColumn dataField="User" editable="false" headerText="User" />
<mx:DataGridColumn dataField="cam" editable="true" width="24" itemEditor="mx.controls.CheckBox" editorDataField="cam" textAlign="center" headerText="M">
<mx:itemRenderer>
<mx:Component >
<mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
<mx:CheckBox id="chb" click="data.cam=!data.cam" selected="{data.cam}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<mx:Component>
<mx:Image width="16" height="16" toolTip="Change Cam Status" source="#Embed(source='icons/webcam_start.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="mic" editable="false" itemEditor="mx.controls.CheckBox" editorDataField="mic" width="24" textAlign="center" headerText="C">
<mx:itemRenderer>
<mx:Component >
<mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
<mx:CheckBox id="chb1" click="data.mic=!data.mic" selected="{data.mic}" />
</mx:Box>
</mx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<mx:Component>
<mx:Image width="16" height="16" toolTip="Change Microphone Status " source="#Embed(source='icons/microphone_plus.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="sound" editable="false" itemEditor="mx.controls.CheckBox" editorDataField="sound" width="24" textAlign="center" headerText="R1">
<mx:itemRenderer>
<mx:Component >
<mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
<mx:CheckBox id="chb2" click="data.sound=!data.sound" selected="{data.sound}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<mx:Component>
<mx:Image width="16" height="16"
toolTip="Turn Sound on/off " source="#Embed(source='icons/audio_volume_high.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
I am using the following data
private var plist:ArrayList = new ArrayList(
[{User:'Ravi Kanchan Sharma', cam:true, mic:true, sound:true},
{User:'Vijay Anand Sharma', cam:true, mic:false, sound:true},
{User:'Yogender Kumar Sharma', cam:false, mic:true, sound:true}]);`
For the dataChange event to fire from a component, the 'data' value needs to change. It is not clear from your code why the DataGrid's data value will change.
the dataChange event is usually used inside an itemRenderer to modify its display contents whenever the itemRenderer's data property is changed. The data property in an itemRenderer would represent a single element of the DataGrid's dataProvider.
Unless you are using the DataGrid as an itemRenderer--which is possible but unusual--I would not expect the DataGrid's data property to change; and therefore the dataChange event will never fire from the DataGrid.
<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>
I have an ArrayCollection named authors with lot of texts of different size. I would like to list all info about authors in a way that each item has a size according to the text. Here is the code:
<mx:List dataProvider="{authors}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%">
<mx:Text text="{data.name}"/>
<mx:Text text="{data.about}" width="100%"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
I have tried many different things but nothing helped. Any ideas? Thx
Try something like this:
<mx:List dataProvider="{authors}" height="300" variableRowHeight="true" width="200">
<mx:itemRenderer>
<mx:Component>
<mx:VBox paddingLeft="0" paddingRight="0">
<mx:Text text="{data.name}" />
<mx:Text text="{data.about}" width="{explicitWidth}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Have you tried using the fontSize attribute?
<mx:List dataProvider="{authors}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%">
<mx:Text text="{data.name}" fontSize='30'/>
<mx:Text text="{data.about}" width="100%"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Alternatively, using the htmlText property will allow you to format the text with HTML: http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_04.html
I have an ArrayCollection of objects.
I'm passing this array to a horizontallist as a dataprovider and I'm using a custom itemRenderer.
When executing the application, the horizontallist is displaying
[object CustomClass][object CustomClass][object CustomClass][object CustomClass]
I've tried casting each object in the itemrenderer as following:
<mx:Label text="{(data as CustomClass).label1}"/>
But it's not working...
Thanks for any help you can provide.
Regards,
BS_C3
Edit - 09 March 2010
Let's go for some more code =)
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Component id="Item">
<mx:VBox width="180">
<mx:HBox width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="x"/>
</mx:HBox>
<mx:Image id="thumbnail"/>
<mx:Label width="100%" horizontalCenter="0" text="Collection"/>
<mx:HBox width="100%">
<mx:Label width="100" text="GIA"/>
<mx:Label text="{data.charg_st}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Finger Size"/>
<mx:Label text="xxxxxx"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Carat"/>
<mx:Label text="{data.carats}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Color"/>
<mx:Label text="{data.color}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Clarity"/>
<mx:Label text="{data.clarity}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Shop"/>
<mx:Label text="{data.lgort_fp}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Resizing"/>
<mx:Label text="{data.resizing}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Price Excl. VAT"/>
<mx:Label text="{data.net_price_fp}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>
<mx:HorizontalList
dataProvider="{GlobalData.instance.tray}"
columnCount="4"
rowCount="1"
horizontalScrollPolicy="off"
itemRenderer="{Item}"
/>
</mx:Canvas>
FYI, the horizonalList dataprovider is an ArrayCollection of objects.
Now, the horizontallist is displaying empty items... with the correct width...
The arraycollection is not empty (I'm using an alert on the click event on an item, and I do retrieve the expected data).
Hope this will help >_<
Regards,
BS_C3
Have you tried
<mx:Label text="{data.label1}"/>
? (label1 being a property of your objects)
Use the labelField field within your list, see here
<mx:List dataProvider="{myDataProvider}" labelField="label1"/>
Try declaring your custom class as a variable somewhere in your component. Once you declare an instance of the class, Flex might have more success identifying the properties of the class.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var myClass:CustomClass;
]]>
</mx:Script>
<mx:Component id="Item">
<mx:VBox width="180">
...
thelost had it right with his code too. You should be able to use
<mx:Label text="{data.label1}"/>
to access your class's properties in your itemRenderer.
Edit: I'm sure you've done this, but also double check that you've set the dataProvider in your HorizontalList to a [Bindable] declaration of your CustomClass.
I managed to resolve my issue.
When I removed the width property of the itemrenderer's vbox, all data appeared in the horizontalList.
Why? I wouldn't know why but it seems like it was positionning the data somewhere out of the visible scope of the horizontallist (huh??).
The thing is that everything is working now. And for the final code, there you have:
HorizontalList:
<mx:HorizontalList id="hlist"
dataProvider="{TrayData.instance.itemsCollection}"
columnCount="{TrayData.instance.hlistColumns}"
rowCount="1"
itemRenderer="components.TrayItem"
horizontalScrollPolicy="off"
horizontalCenter="0" verticalCenter="0"
borderStyle="none"
horizontalScrollPosition="{TrayData.instance.hsPosition}"
/>
ItemRenderer:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:HBox width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="x"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Spacer width="15%"/>
<mx:VBox width="70%">
<mx:Image id="thumbnail" horizontalAlign="center"/>
<mx:Label width="100%" textAlign="center" text="Collection"/>
<mx:HBox width="100%">
<mx:VBox id="labelBox" width="100">
<mx:Label width="100" text="GIA"/>
<mx:Label width="100" text="Finger Size"/>
<mx:Label width="100" text="Carat"/>
<mx:Label width="100" text="Color"/>
<mx:Label width="100" text="Clarity"/>
<mx:Label width="100" text="Shop"/>
<mx:Label width="100" text="Resizing"/>
<mx:Label width="100" text="Price"/>
</mx:VBox>
<mx:VBox id="dataBox" width="100%" horizontalAlign="left">
<mx:Label text="{data.resizingCode + ' ' + data.charg_st}"/>
<mx:Label text="{data.fingerSize}"/>
<mx:Label text="{((new Number(data.carats))/100).toString()}"/>
<mx:Label text="{data.color}"/>
<mx:Label text="{data.clarity}"/>
<mx:Label text="{data.lgort_fp}"/>
<mx:Label text="{data.net_price_fp}"/>
</mx:VBox>
</mx:HBox>
<mx:Button label="Order" enabled="{data.product_type == 'C'}" width="50%"/>
</mx:VBox>
<mx:Spacer width="15%"/>
</mx:HBox>
</mx:VBox>
Regards,
BS_C3
I have a DataGrid,
<mx:DataGrid styleName="alternateColor"
verticalScrollBarStyleName="verticalScrollStyle"
headerSeparatorSkin="uiExtensions.DataGridHeaderSeparators"
width="100%" height="100%" editable="false" color="#000000"
verticalGridLines="false" variableRowHeight="true"
itemEditEnd="processData(event);" sortableColumns="false">
<mx:columns>
<mx:DataGridColumn wordWrap="true" dataField="Name">
<mx:itemRenderer>
<mx:Component>
<mx:Box>
<mx:Text id="tbName" selectable="false"
width="100%" fontSize="12" text="{data.Name}"/>
<mx:Text id="tbcontact" selectable="false"
width="100%" text="{data.Contact}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
The datagrid does not scroll down after i've added 2 text components in a datagridcolumn.
The scrollbar scrolls back up on pulling it down.
Appreciate any help.
Thanks.
Scrolling is enabled in a DataGrid when the height of the grid is not enough to display all the items in its data provider; not when you add more controls to its columns. You have just defined a data grid with a single column that has two Text controls. Assign a big enough data to the dataProvider of the grid and it will work.
Btw, why are you using the Box control instead of HBox or VBox?
Issue Solved,
I used a VBox and Label instead of the Box and Text tags in the code posted above.
My code now looks like this...
<mx:Component>
<mx:VBox horizontalGap="0" verticalGap="0">
<mx:Label id="tbclassified" selectable="true" width="100%" fontSize="11" text="{data.Classified}"/>
<mx:HBox horizontalGap="0" verticalGap="0">
<mx:Label id="tbcategory" textAlign="left" selectable="true" width="100%" fontStyle="italic" color="#9F2200" text="{data.ClassifiedCategory}"/>
<mx:Label id="tbcontact" textAlign="right" selectable="true" width="100%" text="{data.Name} - {data.Contact}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>