Hi all, I need some help with List and itemRenderer
I need to create new component which can expand items when the user
click on it.
I've found an example: Peter Ent's blog
http://weblogs.macromedia.com/pent/archives/2006/04/a_list_itemrend.cfm
When the dataProvider have less data (do not showing scrollbar when
all items are expanded) all fine.
But, it's not working with the big amount of data.
When we scroll items the items expands automatically without any user
actions.
Can anybody say what the problem with it?
Thanks for any advice.
Code:
main.mxml
<mx:List id="categFields" width="100%" height="100%" selectable="false"
paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0"
columnCount="1" columnWidth="500" variableRowHeight="true"
itemRenderer="FieldsInlineItemRenderer"
dataProvider="{simpleDataProviderWithBigAmountOfData}" />
FieldsInlineItemRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml";
horizontalAlign="center"
width="100%" height="100%" creationComplete="initRenderer()"
verticalGap="0">
<!-- FIXME: Fix strange action when scrolling items -->
<mx:Script>
<![CDATA[
[Bindable]
private var itemGridHeight : Number = 20;
private function initRenderer() : void
{
for each (var item:String in data)
{
itemGridHeight += 24;
};
itemGridHeight += 5;
currentState = "";
}
private function toggleState() : void
{
currentState = (currentState == "expanded") ?
"" : "expanded";
}
]]>
</mx:Script>
<mx:DataGrid id="dgFields" dataProvider="{data}" showHeaders="false"
selectable="false"
width="100%" height="24" borderThickness="1"
click="toggleState()">
<mx:columns>
<mx:DataGridColumn width="120" paddingLeft="6"
dataField="field1" />
<mx:DataGridColumn width="120" paddingLeft="6"
dataField="field2" />
</mx:columns>
</mx:DataGrid>
<mx:states>
<mx:State name="expanded">
<mx:AddChild>
<mx:Spacer width="100%" height="10" />
</mx:AddChild>
<mx:AddChild>
<mx:VBox borderStyle="solid" borderThickness="1"
verticalGap="0"
width="96%">
<mx:HBox width="100%" verticalAlign="middle"
backgroundColor="#D7D899">
<mx:Label width="50%" fontWeight="bold"
text="Variable" />
<mx:Label width="50%" fontWeight="bold"
text="Value" />
</mx:HBox>
</mx:AddChild>
<mx:AddChild>
<mx:Spacer width="100%" height="10" />
</mx:AddChild>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{this}"/>
</mx:Transition>
</mx:transitions>
</mx:VBox>
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
