List Height w/ itemRenderer
I'm trying to figure out why my list won't adjust it's height
when the height of the itemRenderer changes. The list looks like
this:
<mx:List id="Parts" width="349"
verticalScrollPolicy="off"
itemRenderer="PartRenderer"
variableRowHeight="true"
alternatingItemColors="[0xEEEEEE, 0xDFDFDF]"
themeColor="#FFFFFF" />
If I add another item to the list, then it grows to fit the
new item, but if the any of the items themselves grow (they each
contain expanding TextArea's etc.) then the list will not adjust
it's height to fit. I know for sure that it is the list that is not
growing because I am printing its height to the screen so I can
monitor its size.
Also, I don't explicitly set the height anywhere for the
list. I also don't want scrollbars in the list. I just want the
whole list to expand to whatever height it needs to show all of
each item.
When the list first loads the height is correct, but if I the
height of an item changes after it has been loaded into the list,
the list no longer adjusts its height to fit.
Any ideas on how to do this or what I might be doing wrong?
First re-install the original SpryMenuBarHorizontal.css.
Then add the following styles to the bottom of the original CSS
ul.MenuBarHorizontal {
font: 80%/1.6em Arial, Helvetica, sans-serif;
ul.MenuBarHorizontal li {
width: auto;
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
padding: 0.5em 2em 0.5em 0.75em;
ul.MenuBarHorizontal a {
background-color: #FC0;
border: 1px solid #02014D;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background:#ffff66 url(navbakyel.jpg) repeat-x center;
color: #000;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible, ul.MenuBarHorizontal li a.MenuBarItemSubmenuHover {
background:#ffff66 url(navbakyel.jpg) repeat-x center;
color: #000;
Gramps
Similar Messages
-
Checkbox position in a list through an itemrenderer
Hi all,
I did make some search and couldn't find anything helpful but please don't hesitate to send me somewhere else if this topic has already been discussed.
Ok,
I created a list and an itemRenderer. it contains a checkbox and everything goes fine except for two things :
Position : I can't success in aligning or centering teh checkbox regarding to the list row.
Label: I can't set any even with dummy text.
How can I get the checkbox well aligned ?
cb.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="20">
<mx:CheckBox label="a" fontSize="9" />
</mx:HBox>
main.mxml
<mx:TileList columnCount="1" width="100" height="20" dataProvider="{pdfPresetsNameArrayCollection}" itemRenderer="cb" rowHeight="30" dragMoveEnabled="true" dragEnabled="true" dropEnabled="true" dragDrop="handleReorder(event)" ></mx:TileList>
Here is what I get as a result :
I would like to get the checkbox nicely centered but any of the properties I try to set from x/y to verticalCenter is helpless.
Thanks in advance for any inputs.
LoicHi and thx for your answer,
I did try this one without success. In fact a friend of mine tried on his won with my file and checkboxes are well placed. As for its swf file, when I launch it on my computer, checkboxes do appear fine.
But when I do on my own and compile, it keeps on displaying checkboxes uncorrectly.
Don't know whatr's wrong :S
Thx anyway,
Loic -
Getting a lists selected item itemRenderer's properties
Is there a way to get a Spark List's selectedItem itemRenderer's contentToGlobal x and y and it's height values?
Thanks,
JohnHello Shongrunden;
Thanks again for your help, if you don't mind me asking a couple of more questions...
- With a scrollable Spark List, if a selected item is partially in view, is there a method to get just the visible height of the itemRenderer?
- Also, on my custom paged List component, with a custom itemRenderer and useVirtualLayout = true, after the list data is retrieved a resultHandler is called, in this I then call your getRendererCoordinates function. I also call getRendererCoordinates() in a listChangeHandler.
After the resultHandler calls getRendererCoordinates, even though the dataGroup is showing the proper number of elements, and I set the list.selectedIndex to 0, the renderer variable created in;
var renderer:IVisualElement = list.dataGroup.getElementAt(list.selectedIndex);
the renderer var returns null on the initial display called from the resultHandler, but ... it works perfect on on the listChangeHandler and subsequent page displays. So it seems the renderer is not finished being drawn when getRendererCoordinates is being called from the resultHandler, but subsequent page displays work probably because the renderer has already been drawn. I've tried callLater(getRendererCoordinates) but since nothing else is going on it won't trigger. I did not see an event that can be dispatched from IVisualElement after it is completely drawn that I can use to call getRendererCoordinates.
Any suggestions?
Thanks again for your help and time,
John -
Limiting content-list height of choicebox
I want to limit the list-height of the choicebox for example to select an year from the choice box the list-height goes beyond the screen so how to limit the content-list height of the choice box??
Edited by: user10439924 on Jun 19, 2011 2:33 AMHi,
here is what i got with Button and ListView, Button does not look as i wanted but it satisfies my needs so i will change button to label later.
You can found sources in git : https://github.com/jojorabbit/DeckControl under folder ListComboBoxTest.
Narayan I think that ListView does not need ScrollPane, in 1.3 there were ScrollBars in ListView i did not need to wrap it into ScrollPane. Not 100% sure how it is in 2.0
Fell free to post critics, comments, issues, requests etc.
Hope it helps. -
If given data, is there a way to find the height of its respective itemrenderer before adding it to the list ?
Nevermind,
On the DataGroup of the list, there is an array property "indexToRenderer". It is declared private but it is the basis of the numElements and getElementAt functions.
Unless of course this is a terrible terrible way to do it. -
I am using a Tree List shared component.
Is there a way for me to control the height and width of the Tree List on my page?
Many thanks,
MarkI'd forgotten about writing that...
Please write me directly ( [email protected] ); we can discuss what you're trying to develop, and the best ways to accomplish it. -
H:selectOneList box dropdown list height
hii all
I want to limit the height of drop down list coming when clicking the list box. Or else can we put scroll inside the popup comming
in listbox. I want to display only 10 lines, so if more rows comming i want to have a scroll.
Is it possible with this component, please help
Thanks in advanceNot the normal way. This is browser specific behaviour. Best what you could do is to mimic a dropdown using a shot of DHTML. But that isn't worth the effort IMHO.
-
SelectItems using custom list component and itemRenderer
Hello, is it possible to do this without overriding selectedItems setters?
I'm passing xml as the dataProvider for a custom list:
here is the dataProvider XML:
<color id="1" name="Red" color="0xFF0000" />
<color id="2" name="Blue" color="0x0000FF" />
<color id="3" name="Green" color="0x00FF00" />
<color id="4" name="Orange" color="0xFF9900" />
<color id="5" name="Yellow" color="0xFFFF33" />
<color id="6" name="Purple" color="0x990099" />
i I've tried passing the selectedItem like this: colors.selectedItem= XML('<color id="3" name="Green" color="0x00FF00" />')
with no luck. i also have tried the vector.<Object> method as well with no luck.Can someone show me an example data format that you think might work for the selectedItem property, or even better selectedItems?
thanks- brandonThank you for the help; so i think i understand what you're saying:
i have to search through the 'colors' dataProvider for the items i wish to be selected, then I create a list of those vectors/items I wish to be selected, then pass that list to the selectedItems property? seems easier to find all selectedIndices instead if this is a correct method? thanks -brandon -
Spark List Itemrenderer items outside of List
I have a spark list and i want some of the items in it to appear out side of the list depending on the users interaction.
Is there a way to make items of an item renderer appear outsid of the LIst container?
When i use basic layout on the lsit and explicitly set the x and y, they appear behind the list.
Thanks.Hi jmandawg,
My ListRenderer.mxml may be what you want as follows,
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" hide="mOut(
null)" mouseMove="mOut(event)" mouseOut="mOutValueItem(event)"mouseDownOutside="mOut(event)" creationComplete="inited()"
autoDrawBackground="
true">
<fx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.managers.PopUpManager;
import mx.utils.StringUtil;
import flash.text.TextLineMetrics;
public var mouseOnPopup:Boolean = false;
public var vi:mx.controls.TextInput;
private function inited():void {vi =
new mx.controls.TextInput();vi.editable=
false;vi.addEventListener(MouseEvent.MOUSE_OUT, mOut);
vi.addEventListener(MouseEvent.ROLL_OUT, mOut);
vi.addEventListener(MouseEvent.MOUSE_OVER, mOverPopup);
private function mOut(event:MouseEvent):void {
if ( vi.isPopUp ) {PopUpManager.removePopUp(vi)
mouseOnPopup =
false;}
private function mOverPopup(event:MouseEvent):void {mouseOnPopup =
true;}
private function mOutValueItem(event:MouseEvent):void {
if ( vi.isPopUp && !mouseOnPopup) {PopUpManager.removePopUp(vi)
private function mOver(event:MouseEvent):void {
var txt:String = itemValue.texttxt = StringUtil.trim(txt);
if(txt.length<5) return;
if(!vi.isPopUp) {PopUpManager.addPopUp(vi,
this.parent)vi.text=txt;
vi.setStyle(
'fontSize',18);
var txtMetrics:TextLineMetrics = vi.measureText(vi.text);vi.width=txtMetrics.width*1.2
vi.height=itemValue.height*1.4
var p:Point = itemValue.localToGlobal(new Point(itemValue.x, itemValue.y));vi.x=p.x;
vi.y=p.y-10;
]]>
</fx:Script>
<s:TextInput id="itemValue" text="{data.value}" width="200" mouseOver="mOver(event)" mouseOut="mOutValueItem(event)" mouseMove="mOut(event)" editable="false"/>
</s:ItemRenderer>
You may test it with the following in your main.mxml
Bindable]
private var detailAC:ArrayCollection = new ArrayCollection([{value:"nteDevice.device"},{value:
"nteDevice.deviceTypenteDevice.loopbackIpAddr"},{value:
"nteDevice.ipAddressnteDevice.loopbackIpAddr"},{value:
"nteDevice.loopbackIpAddrnteDevice.loopbackIpAddr"}, {value:
"nteDevice.release"},{value:
"nteDevice.releasenteDevice.loopbackIpAddr"},{value:
"nteDevice.clli"},{value:
"nteDevice.provisionStatus"}]);
<s:List id="lst" itemRenderer="com.att.ntscp.view.component.ListRenderer" dataProvider="{detailAC}" width="200" height="200"/>
Is it a little bit trick?
Jeffrey -
Well guys, I seem stuck with a wall trying to make List
control working with programmable dataProvider and itemRenderer
defined as a component. The naive example from flex2 dev guide (p.
723 "Using an item renderer with a List control") is working fine,
but in real word we are hardly coding dataProvider inline, so I
tried to change this example and got absolutely nothing in my
browser window:
main application:
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
height="700" width="700" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import flash.events.Event;
import flash.net.URLRequest;
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
[Bindable]
private var u:URLRequest;
private var jobArray: Array = new Array();
private var myAC: ArrayCollection = null;
private function initApp():void {
var myObj1:Object = {label:"Alaska", data:"Juneau",
webPage:"
http://www.state.ak.us/"};
var myObj2:Object = {label:"Alabama", data:"Montgomery",
webPage:"
http://www.alabama.gov/"};
jobArray.push(myObj1);
jobArray.push(myObj2);
myAC = new ArrayCollection(jobArray);
]]>
</mx:Script>
<mx:List id="myList"
height="180" width="250" variableRowHeight="true"
itemRenderer="RendererState" backgroundColor="white"
dataProvider="myAC">
</mx:List>
</mx:Application>
itemRenderer component:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import flash.events.Event;
import flash.net.URLRequest;
private var u:URLRequest;
private function handleClick(eventObj:Event):void {
u = new URLRequest(data.webPage);
navigateToURL(u);
]]>
</mx:Script>
<mx:HBox >
<mx:Label id="State" text="State: {data.label}"/>
<mx:Label id="Statecapital" text="Capital: {data.data}"
/>
</mx:HBox>
<mx:LinkButton id="webPage" label="Official {data.label}
web page"
click="handleClick(event);" color="blue" />
</mx:VBox>
Anyone?Ug, why won't adobe let us use tabs in our messages? Just to
make everyone's code harder to read? Anyway...
the very first thing I notice is that your list's
dataProvider has no brackets "{}" to link it to the object. Seems
that should throw an error though... however, there is a way to
mess up your browser by installing the new Flash 9 player without
installing the new SDK so that you don't actually get to see the
errors that are thrown. So be careful there.
First see if the brackets is an issue. Even if it doesn't
throw an error, since you aren't binding the dataProvider property
it may only load the ArrayCollection once when it is still empty
and not after you have pushed the new data. You might also try
setting the dataProvider directly in AS code: list.dataProvider =
[obj1, obj2]
I recommend adjusting your code in various ways first before
finally giving up and posting here. Often that will narrow down the
problem and make it easier to address.
Finally, if you are thinking of having multiple focusable
controls in your itemRenderer/Editor (this goes for either List or
DataGrid) you should abandon the idea right away. Last I checked,
tab focus will not pass correctly between individual renderers (at
least not on IE). My solution is to simply use a Repeater. It has
more overhead and you have to fiddle with scroll bars a bit, but it
is a much more stable and robust solution.
Anyway good luck. -
Complex Itemrenderer (List within List), how can i disable the scroller?
Hey Folks,
so im struggeling for a while with a scrolling problem now.
I'm developing a flex application with some complex views. On of the views is like a word document view. It pulls data from the database and represents requirement specification. You can also edit the data within this "word" view. It should basicially work like microsoft word. That view works fine but i have one issue with it: Scrolling!
To realize that view i have created a complex ItemRendererClass that contains another complex ItemRenderClass. Imagine it like that>
-List of chapters (itemrenderer)
- Chapternumber + ChapterTitle
- ChapterText
- Chapterpicture
- List of data (itemrenderer)
- Requirementnumber
- RequirmeentText
- Pictures
- lots and lots of attributes
All in all I'm really happy how the "word" view&editor works but if im scrolling down and im over the second lists which represents the list of requirements i cant scroll anymore, when the mouse is out of the list item i can scroll again. What i have done is i use virtuall layout on both lists for performance reasons and the second lists height is a 100%, so the second scroller never appears. I have tried to disable the second scroller of the second lists with "this.scroller.setStyle('verticalScrollPolicy', 'off')". But nothing happens. What i want is a normal scrolling behaviour, means that it shouldnt matter where in the "wordview" the mouse is i want to scroll like it is one list and not 2 lists.
I would appreciate a hint where i should look for advice, or maybe someone i the communitiy has faced the same problem.
Thanks,
MarkusShould the second list ever be scrollable? If not, use a DataGroup for it instead. If is should scroll sometimes (and/or requires mouse interactions), you will need to add in some extra logic to tell it when the item renderer should capture your mouse and when it should not. You should then set mouseEnabled to false on the second list when it's determined that it should not capture your mouse (this is just one possible solution off the top of my head... but that should do the trick I think...).
-
Flex 4.5 What is the use of List verticleLayout rowHeight property ??
I've just used this as a set up:
A List with a skin with datagroup and a VScrollBar in it.
On the datagroup verticleLayout I set variableRowHeight to false and rowHeight to 43.
I have 8 items in my dataProvider but less can be seen in the list = the VScrollBar should be active and be able to scroll.
Unless I set a fixed height to 43 of my ItemRenderer the VScrollbar is bugged and doesn't allow scrolling as if there were no items in my List.
My ItemRenderer is very simple just a group with 100% height (which should fill the rowHeight specified but doesn't) and 100% width and rect in it so I can see the item in the list. And I do see them up to where the list height ends. The rest I can't, cause I can't scroll, which means that the viewport measures wrongly the itemRenderers.
Isn't setting variableRowHeight to false and rowHeight to a fixed number supposed to automatically set the height of each itemRenderer to whatever the rowHeight property has ? Or why should I use that property if then the itemRenderer doesn't get this height and screws up it's measurement ?
It's very simple to test, here is the list skin code to use:
<s:HGroup width="100%" height="100%" gap="0">
<s:DataGroup id="dataGroup" width="100%" height="100%" clipAndEnableScrolling="true"
itemRenderer="spark.skins.wireframe.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" variableRowHeight="false" rowHeight="43" horizontalAlign="contentJustify" />
</s:layout>
</s:DataGroup>
<s:VScrollBar viewport="{dataGroup}" width="17" height="{dataGroup.height}"
skinClass="ContactListVScrollBarSkin" />
</s:HGroup>
Anyone ?Hi Shongrounden, sry for the late reply. You know how it is with time But better late then never! So here are the 2 examples - 3 bugs - 1 old, 2 new:
Both examples are with view source so you can test fast
1) http://www.nedyalkov.net/filip/flex_projects_tests/ListVScrollBarTest2/
Note: this example is based on dataGroup not List.
Scroll to the bottom (don't use mouse wheel) - > now hover over any of the 4 white areas (that's where the gap is -> handled by the skin) -> try the mouse wheel to go up. It won't work. If you try it on the first gaps it will work till some point you go down it won't. That's from Flex 4.1 and I reported this bug, just saying not fixed yet...
2) http://www.nedyalkov.net/filip/flex_projects_tests/ListVScrollBarTest/
Note: this example is based on List cause the problem comes when useVirtualLayout="true".
I explained about the old bug and since I didn't want it to mess up this test case I didn't use it here gap is 0. Each ItemRenderer is a back rectangle 100% width/height. As you see the scroll doesn't work but it should cause there is a lot to scroll there. If I set gap then the scroller can be scrolled but just by the height of the sum of gaps... The only way you can scroll with this bugged scroller is to drag the scollerThumb if you can see it at all. When you drag it down the scrollerThumb shrinks as more itemRenderers pop up and when you "discover" them all you can scroll normally.
UPDATE: White writing this I tested and turned out that it's cause of the useVirtualLayout="true" (by default). But no matter I have variableRowHeight="false" and rowHeight="100" ... the scroller gets messed up...
Well I think you pretty much got the idea of what's bugged now
Note: If you add <s:Label text="{data}" /> to the CustomIR along with the Rect I have there = bug is fixed... Scroller calculates everything nice. I tried also to put <s:Group /> doesn't fix the bug... so I am not sure which exactly are the magical components that fix this bug
UPDATE on the Note: Even with the magical label there still the scroller doesn't properly calculate the total height of the viewport based on the items * rowHeight when variableRowHeight="false" and useVirtualLayout="true" - meaning you have to scroll down to see the scroller shrinking while normally it should calculate approximately or in this case precisely it's height.
3) In Case 2) if you set a gap="20" for example... there is a gap before the first itemRenderer... should not be there...
Note: Again - If you add <s:Label text="{data}" /> to the CustomIR along with the Rect I have there = bug is fixed...
That's it Shongrunden I hope this helps! -
Need help with navigation within a spark list...
hey guys, so in my application when you click on a list item, it opens up an image, and along with the image a few buttons are created dynamically...
the image and the url/labels for the dynamic buttons is provided through an xml/xmlListCollection.
what i need help with is the url or more specifically when you click on one of these dynamic buttons it needs to navigate me to another part of an list or display a certain set of images that is not in my spark list...
please let me know if this makes no sence
the code i have is
<code>
[Bindable] private var menuXml:XML;
[Bindable] private var imgList:XMLListCollection = new XMLListCollection();
[Bindable] private var navControl:XMLListCollection = new XMLListCollection();
[Bindable] private var fullList:XMLListCollection = new XMLListCollection();
private var returnedXml:XMLListCollection = new XMLListCollection();
private var myXmlSource:XML = new XML();
//[Bindable] private var xmlReturn:Object;
private var currImage:int = 0;
//public var userOpProv:XMLListCollection = new XMLListCollection();
//private var troubleShootProvider:XMLListCollection = new XMLListCollection();
private function myXml_resultHandeler(event:ResultEvent):void{
userOptionProvider.source = event.result.apx32.userOptions.children();
troubleShootProvider.source = event.result.apx32.troubleShooting.children();
fullList.source = event.result.apx32.children();
returnedXml.source = event.result[0].children();
myXmlSource = event.result[0];
private function myXml_faultHandler(event:FaultEvent):void{
Alert.show("Error loading XML");
Alert.show(event.fault.message);
private function app_creationComplete(event:FlexEvent):void{
userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
myXml.send();
//trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
myXml = new HTTPService();
myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
myXml.resultFormat = "e4x";
myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
myXml.send();
private function troubleShootChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = troubleShootProvider[event.newIndex].children();
currImage = 0;
imgList.source = troubleShootProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
//var isMultiPage:String = navControl[2]["multiPages"];
//trace(isMultiPage);
// if(isMultiPage){
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
private function customButtonPressed(event:Event):void{
if(imgList[currImage].button.@changeTo != ""){
private function userOptionsChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = userOptionProvider[event.newIndex].children();
currImage = 0;
imgList.source = userOptionProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
dynamicButtons.addElement(newButton);
var isMultiPage:String = navControl[2]["multiPages"];
if(isMultiPage == "true"){
if(navControl[2]["next"] == "NEXT STEP"){
navContainer.x = 630;
else{
navContainer.x = 640;
next.label = navControl[2]["next"];
back.label = navControl[2]["back"];
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
private function nextClickHandler(event:MouseEvent):void{
currImage += 1;
dynamicButtons.removeAllElements();
if(currImage >= imgList.length-1){
currImage = imgList.length - 1;
//next.visible = false;
next.label = "YOU'RE DONE";
else
next.label = navControl[2]["next"];
back.visible = true;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
definition.source = imgList[currImage].@url;
private function backClickHandler(event:MouseEvent):void{
currImage -= 1;
dynamicButtons.removeAllElements();
if(currImage == 0){
back.visible = false;
next.visible = true;
next.label = navControl[2]["next"];
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
definition.source = imgList[currImage].@url;
</code>
i have attached a copy of the xml that i have right now to this post for reference...
any help will be greatly appretiated!!! i've been stuck on this problem for the last week and my project is due soon
again thank you in advance...hey david... just nevermind my previous post... I was able to subclass a link button, so i now have two variables that get assigned to a link button,
one is "tabId" <-- contains the information on which tab to swtich to, and the second is, "changeTo"... this contans the label name which it needs to switch to
I'm just stuck on how to change my selected item in my tabNavigator/list
the code i have right now is
private function customButtonPressed(event:Event):void{
if(event.currentTarget.tabId == "troubleShooting"){
for each(var item:Object in troubleShootProvider){
if(item.@label == event.currentTarget.changeTo){
private function userOptionsChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = userOptionProvider[event.newIndex].children();
currImage = 0;
imgList.source = userOptionProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:customLinkButton = new customLinkButton();
newButton.label = item.@name;
newButton.tabId = item.@tab;
newButton.changeTo = item.@changeTo;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
dynamicButtons.addElement(newButton);
var isMultiPage:String = navControl[2]["multiPages"];
var videoPresent:String = navControl[1]["videoPresent"];
if(videoPresent == "true"){
if(isMultiPage != "true"){
navContainer.x = 825;
if(isMultiPage == "true"){
if(navControl[2]["next"] == "NEXT STEP"){
navContainer.x = 630;
else{
navContainer.x = 640;
next.label = navControl[2]["next"];
back.label = navControl[2]["back"];
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
as you know, my xml gets divided into two saperate xmllistcollections one is the userOptionProvider, and the troubleshootingProvider
as is in the following xml
<mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
tabWidth="137.5" creationPolicy="all" borderVisible="false">
<mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
borderVisible="false" contentBackgroundColor="#e9e9e9"
change="userOptionsChange(event)">
<s:dataProvider>
<s:XMLListCollection id="userOptionProvider" />
</s:dataProvider>
</s:List>
</mx:VBox>
<mx:VBox label="TROUBLESHOOTING">
<s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9"
change="troubleShootChange(event)">
<s:dataProvider>
<s:XMLListCollection id="troubleShootProvider" />
</s:dataProvider>
</s:List>
</mx:VBox>
</mx:TabNavigator>
Im having some trouble updating my list... basically change to the troubleshooting tab, and then select the one that i need...
hopefully that makes sence... -
I need s:list display 2 colums item, like mx:tilelist.
RT,
How can I do, I need 2 colums item, I write itemrenderer, set some properties, but it's not work.
I want s:list like mx:tilelist.
Please help me.
code is here:
c2.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:CurrencyFormatter id="currFormatter" precision="2" />
</fx:Declarations>
<s:layout><s:BasicLayout /></s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var myar:ArrayCollection = new ArrayCollection(
[{name:"The", price:"0.23"},
{name:"quick", price:"1.03"},
{name:"brown", price:"0.98"},
{name:"fox", price:"1.19"},
{name:"jumps", price:"0.28"},
{name:"over", price:"0.42"},
{name:"the", price:"0.09"},
{name:"lazy", price:"0.81"},
{name:"dog", price:"0.72"}]
private function comboBox_labelFunc(item:Object):String {
return item.name + "\t" + currFormatter.format(item.price);
]]>
</fx:Script>
<s:List id="comboBox"
itemRenderer="TabItemRenderer"
horizontalCenter="-157"
verticalCenter="-124"
width="250"
height="500"
dataProvider="{myar}"
>
</s:List>
</s:Application>
tabItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:fxg="http://ns.adobe.com/fxg/2009">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout><s:BasicLayout /></s:layout>
<mx:Tile direction="horizontal" autoLayout="true" tileWidth="100" tileHeight="50" horizontalGap="0" >
<s:Button label="{data.name}" width="100%" height="100%" />
</mx:Tile>
</s:ItemRenderer>
this only one colum.
please!!!!I know it.
in c2.mxml change to:
<s:List id="comboBox"
itemRenderer="TabItemRenderer"
horizontalCenter="-157"
verticalCenter="-124"
width="250"
height="500"
dataProvider="{myar}"
>
<s:layout>
<s:TileLayout requestedColumnCount="2" />
</s:layout>
</s:List>
add s:layout here.
and tabItemRenderer.mxml, delete mx:Tile.
set s:TileLayout requestedColumnCount = 2.
and ,it's working. -
Datagrid/list item saperator need help
hey guys.... so i got another question lol
im trying for a list to look exactly like the image i have attached to this post...
basically space between each item and a dotted line image on the bottom of that image....
anyone have any ideas??
i have the following so far...
<mx:TabNavigator width="275" height="400">
<mx:VBox label="USER OPTIONS" width="100%" height="100%">
<s:List width="100%" height="100%">
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Adjust Volume" />
<fx:Object label="Arm/Disarm System" />
<fx:Object label="Change Mastercode" />
<fx:Object label="Secondary Codes" />
<fx:Object label="Bypass the Sensors" />
<fx:Object label="Record/Delete Messages" />
<fx:Object label="Set Time" />
<fx:Object label="System Status" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</mx:VBox>
<mx:VBox label="TROUBLESHOOTING">
</mx:VBox>
</mx:TabNavigator>cyber,
I'd look at making a custom item rendererer and then adding a repeating fill BitmapImage at the bottom (or top):
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:Label id="labelDisplay"
left="4" right="4" top="4" bottom="5" />
<s:BitmapImage id="dottedLine"
source="@Embed('../redbluebg.gif')"
fillMode="repeat"
width="100%"
bottom="0" />
</s:ItemRenderer>
And then set the item rederer in your main app:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20" />
</s:layout>
<s:controlBarContent>
<s:HSlider id="sl" minimum="20" maximum="600" value="100" />
</s:controlBarContent>
<s:List id="lst" itemRenderer="skins.foo" labelField="firstName" width="{sl.value}">
<s:dataProvider>
<s:ArrayList>
<fx:Object firstName="1.One" lastName="1.Two" />
<fx:Object firstName="2.One" lastName="2.Two" />
<fx:Object firstName="3.One" lastName="3.Two" />
<fx:Object firstName="4.One" lastName="4.Two" />
<fx:Object firstName="5.One" lastName="5.Two" />
<fx:Object firstName="6.One" lastName="6.Two" />
<fx:Object firstName="7.One" lastName="7.Two" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
Peter
Maybe you are looking for
-
IPod shuffle 2nd Gen not appearing in Windows Vista
Dear All: I have a 2nd Gen shuffle that will not show up in iTunes or Windows on a Vista Home Basic machine. Vista finds an unrecognized USB device and cannot find a driver. The orange light on the shuffle blinks, and the Vista device manager keeps d
-
My iPad mini is not being recognised by iTunes 12, can anyone help?
Version 8.1.2 iPad mini 1st gen I am unable to sync as it is not being detected by itunes i am using a windows pc windows 7
-
As I start up firefox, I'm prompted to update but it fails saying that it cannot update and that I should make sure that there is not more than one version of firefox running
-
I can't send message to some contact but they can sent me message Blackberry Pearl3g 9105
Blackberry Pearl3g 9105 I can't send message to some contact but they can sent me message. when they send me message I receive it but when I send them message it shows the sign X in red Please help
-
In the Customizing Reports at Runtime for Reports 6i (I'm running version 6.0.8.25.0), what is the correct syntax for the <link> tag when generating a report via XML? The syntax line in the document shows: <link parentGroup="name" parentColumn="name"