ColumnChart - 3D Item Renderer problem
I'm building a 3D column chart and am finding that I need to
draw the columns in a specific order other than the default, which
appears to be by series.
Things go just fine until the z-order depth is greater than
the distance between the series. Once that occurs, the potential
exists for things to go south.
To demonstrate the issue, I've put a few screenshots here:
3D Column Chart
Images
My question: Is there a way to define, or otherwise take over
the drawing order of the ColumnSeriesItems? I want to draw the
columns in the order they appear from left to right, but Flex seems
to want to draw by order of series - first Series1, then Series2,
then Series3, etc.
I'm looking through the Framework source code, but I haven't
found a way around this - yet. Of course, if there's another
approach, like using some clipping method I'm not aware of, etc,
please feel free to clue me in.
Thanks in advance to anyone with useful info.
Thanx for reply.But this is not what i am looking for.I need
to apply different colors for each bars.I am generating charts
dynamically.The item renderer is working fine.But at specific
condition the item renderer shold ne removed from the chart series
Similar Messages
-
Flex Mobile List Item Renderer problems
i have flex mobile list created with item renderer,i remove individual item in flex mobile list,it is worked very well,but some times i double click action or another scroll event using in list, last item doesn't delete in flex mobile list.it is repeated again and again.so anyone this problem faced,give me a solution.
i expect your feedback.Thanking YouHi Alex,
I've searched a lot for that post (on this forum and on google). Not sure if this is the post you were talking about: http://tech.groups.yahoo.com/group/flexcoders/message/161146
I have fixed the setter of the data not to also manage the state (I figured it was inappropriate there)... overrode the getCurrentRendererState, I'm managing the state staight from the data. When I run the following... All sold items show as sold... and normal states show as normal. When I try to hover over the normal state, it dosen't play the hovered state, and when I click to the selected state. These built in states don't work.
override public function set data(value:Object):void {
super.data = value;
ticketNumber_ti.text = value.slots_id;
override protected function getCurrentRendererState():String {
var state:String;
if (data.date_purchased != null) {
state = 'sold';
mouseChildren = false;
mouseEnabled = false;
} else {
state = 'normal';
mouseChildren = true;
mouseEnabled = true;
return state;
On another note, the states only update, once I start scrolling, everything updates... I tried to validateDisplayList() to the List after setting the dataProvider with no luck.
Once I find a solution I will certainly add it to my Blog as I have not found a lot of solutions for this problem.
Any help is grteatly appreciated. -
AdvancedDataGrid Item Renderer Problem
I have a problem in AdvancedDataGrid Item Renderer.
The Grid is having dynamic add/remove row functionality and the first column I having an Item Renderer.
I am facing a problem when I add and remove row from the grid. The item Renderer.
is misplaced in different row.
If you click on the node new row will get added. (only by clicking Asset Sale & CDS node, not for other nodes).
Try clicking more than 6 times then do delete row you can see the problem.
Please find the attachment for code sample.
I have been trying this out for quiet some time. But no hope.
Can any one solve this issue?
Thax
Tamil SelvanSorry, I forgot to tell the file in the attached zip.
THe file name is: ActionPlanTest.html -
Datagrid and Inline Item renderer problem
I have a datgrid with two inline item renderers. The dataprovider for my DG is a nested object (objects within objects within objects i.e 3-layered).
Main Object - 1st Level
|
2nd Level Object 1
|
3rd level object '1' => ('name'=>somename,'id'=>someid)
3rd level object '2'
3rd level object 'n'
2nd Level Object 2
|
3rd level object '1' => ('name'=>somename,'id'=>someid)
3rd level object '2'
3rd level object 'n'
I use 2 item renderers (one for each datagrid column) which loops thro the 2nd level object1 and 2 respectively (the 2nd level object is a dynamic array of objects, in that the number of objects within keep changing).
Within the item renderer I loop thro the 2nd level object using a foreach and then display the data. The data is a linkbutton, which when clicked , calls a remote object function to delete the data from the database
now on the result event of the remote object function call, i call the function to repopulate the DG, so that the updated data is displayed.
When i click on the linkbutton in the first row, the backend works perfectly fine (the data gets deleted from the database and the refreshed data is sent back), but for some reason, the deleted data suddenly appears in the 2nd row.
When i delete it from the second row, it appears on the 3rd row (nothing happens in the backend since the data is already deleted).. and so on, till it appears on the last row and then the DG looks exactly the way it shld have looked after the first delete.
This is just the beginning. The second item renderer also displays a linkbutton, which when clicked, displays that data in the previous column (the one where this data can be deleted). When i click on 1st row, the data gets added in the previous column of the second row .. and so on..
Basically, my DG is acting really weird. I overrided the set data function in the item renderer to refrsh the data and called its invalidateDisplayList. I also call the Datagrid's invalidateDisplayList function after each refresh. The behavior remains the same.
Please help me on this ...Hi, Post a test code.... It will be a lot easier to help you Mich
-
Datefield as Item renderer problem
I am having problems with the datefield while using it in a
renderer. If you click the text area of the datefield to bring up
the datechooser everything works, if you click the datefield icon
the date is not bound properly.
Try out the code below and you will see what I am talking
about. Any idea what im doing wrong?
dateRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="{newDate = data.Date}">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.binding.utils.ChangeWatcher;
import mx.formatters.DateFormatter;
// Define a property for returning the new value to the
cell.
[Bindable]
public var newDate:Date;
private var df:DateFormatter = new DateFormatter();
private function test(event:Event):void {
trace(df.format(dateFieldTI.selectedDate));
newDate= new Date(dateFieldTI.text);
this.dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END, true, false, 0,
"newDate", -1, null, this));
]]>
</mx:Script>
<mx:DateField id="dateFieldTI"
showToday="false"
selectedDate="{newDate}"
text="{df.format(newDate)}"
click=""
change="test(event)"/>
</mx:VBox>
/////////////////////////////////////////// dateRenderer.mxml
File///////////////////////////////////////////////////////
/////////////////////////////////////////////// Begin
application ///////////////////////////////////////////////////
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
height="700" width="700">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Date: new Date("3/14/2007")},
{Date: new Date("3/14/2007")}]);
[Bindable]
public var displayedDate:String;
private function getDate():void {
displayedDate = initDG[0].Date;
]]>
</mx:Script>
<mx:DataGrid id="myDG"
width="500" height="250"
dataProvider="{initDG}"
variableRowHeight="true"
editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Date"
width="200"
editable="true"
rendererIsEditor="true"
itemRenderer="dateRenderer"
editorDataField="newDate"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="getIt" click="getDate()"/>
<mx:Text text="{displayedDate}"/>
</mx:Application>Hi Proeliata ,
I am using mx.controls.DateField as itemRenderer in the
DataGridColumn as Below.
<mxataGrid
id="dgDetailsContainer" dataProvider="{alphaGroups}"
variableRowHeight="true"
sortableColumns="true" editable="true" width="100%"
itemEditEnd="editGrid(event)">
<mx:columns>
<mxataGridColumn
headerText="ETA Date" itemRenderer="mx.controls.DateField"
editorDataField="selectedDate"
rendererIsEditor="true"
editable="true" dataField="EtaDate" />
</mx:columns>
</mxataGrid>
While I was submitting the dataGrid values If I try to alert
the EtaDate using the below call
I am getting null value always.
private function submitChanges():void
try{
Alert.show("EtaDate0 is"+alphaGroups[0].EtaDate);
Alert.show("EtaDate1 is"+alphaGroups[1].EtaDate);
commonWebService.submitChanges(alphaGroups);
}catch(err:Error){
Alert.show("Please choose Title and Alpha");
Please help me to re-solve,If any one handled this scenario
please provide me the sample code to update dataProvider.
Back to top
Thanks,
Ravindra -
I don't seem to have the correct syntax for adding a check box to a datagrid. Here is what I have:
<cust:MyAdvancedDataGrid
id="dgData"
width="100%" height="85%"
textAlign="center"
fontWeight="normal"
dataProvider="{custVO}"
selectionMode="singleCell"
accessibilityName="Case Composition, DataGrid, use arrow keys to navigate between cells">
<cust:columns>
<mx:AdvancedDataGridColumn
headerText="Select"
rendererIsEditor="true"
width="100">
<mx:itemRenderer>
<fx:Component>
<s:CheckBox selected="false"/>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
This was based on a google search.
What is the correct format?I had no idea this was such a hard question that no one had done one of these.
Also, if anyone knows why a cut and paste in here produces such a goofy table please let me know. -
Problem with checkbox item renderer in datagrid
I have a data grid having check box as an item renderer. I have viewed many posts in this forum but nothing useful in my case. I am failed to bind my datagrid itemrenderer checkbox with the field of dataprovider i.e. listUnitMovement.CHECK_PATH. Then I have to traverse data provider to check which checkboxes are checked.
[Bindable]
var listUnitMovement:XMLList=null;
In a function call
public function init(event:ResultEvent):void
listUnitMovement=event.result.unitmovement;
<mx:DataGrid id="dg_country"
dataProvider="{listUnitMovement}"
enabled="true">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Latitude" dataField="NEW_LAT" visible="false"/>
<mx:DataGridColumn headerText="Longitude" dataField="NEW_LONG" visible="false"/>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:Button label="Details"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>Hi,
Do you want to just check/uncheck the checkboxes based on the CHECK_PATH field.
Do you want something like this...
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;[
Bindable]
private var listUnitMovement:ArrayCollection = new ArrayCollection([{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:false,NEW_LAT:133.233,NEW_LONG:702.22}]);]]>
</mx:Script>
<mx:DataGrid dataProvider="{listUnitMovement}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" change="data.CHECK_PATH=selected" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="NEW_LAT"/>
<mx:DataGridColumn dataField="NEW_LONG"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Please let me know clearly what's your problem...Do you want to just bind the check box based on XmlList or something else..?
Thanks,
Bhasker Chari.S -
Data provider problem in custom item renderer
I have a complex, custom item renderer for a list. I add
items that I extracted from an xml to the data provider using the
IList interface. But when displaying the list, the items are all
screwed up. Each rendered item has some parts which are initialized
as different components depending on the values from the xml. This
initialization is called in the item renderer for the
creationComplete event.
The weird thing is that when I output the dataProvider to
check its values, some of the items have internal uids sometimes
and sometimes they don't. If I output the dataProvider right after
I add the items to it, none of them get internal uids. But from the
initialize method, some of them do and some don't.
To make things weirder, sometimes, as I scroll up and down
the list, the dynamic components get all switched up. I'm either
having a problem with internal uids or with the creation policies
for lists. Or it's probably some simpler mistake I have yet to see.
Anyone have any idea where the problem could lie? Any help is
greatly appreciated.Any successful render must:
1) override the set data property of the component
Further, best practice is to store any data you need in the
override set data(), and call invalidateProperties(). Then do the
actual work in an override commitProperties() function.
The framework is smart about when to call commitProperties
efficiently. set data() gets called much more often.
Tracy -
DataGrid Horizontal Scroll Problem when datagrid contains Item renderer
I have datagrid with horizontal scroll policy enabled. Grid
contains some item renderer also.One of the item renderer is
datefield when i select a date from the datefield and say the
adjacent cell of the grid also contain datefield itemrenderer
and i am selecting date from that itemrenderer also.When i
scroll horizontally the date in the itemrender changes to any one
of the two itemrenderer.Some time it works fine.I am getting the
issue for combobox itemrender also.Can any one help me to solve
this issue."happybrowndog" <[email protected]> wrote in
message
news:ge11ag$jdo$[email protected]..
>
quote:
Originally posted by:
ravi_bharathii
> I have datagrid with horizontal scroll policy enabled.
Grid contains some
> item
> renderer also.One of the item renderer is datefield when
i select a date
> from
> the datefield and say the adjacent cell of the grid also
contain datefield
> itemrenderer
> and i am selecting date from that itemrenderer also.When
i scroll
> horizontally
> the date in the itemrender changes to any one of the two
itemrenderer.Some
> time
> it works fine.I am getting the issue for combobox
itemrender also.Can any
> one
> help me to solve this issue.
>
> Ravi, I am having a similar problem. I subclass a
TextInput as an
> itemrenderer for a column in a datagrid. My subclassed
TextInput checks
> to see
> the value in the overriden set() method, and depending
on the value, sets
> the
> background color of the TextInput to green. When the
datagrid scrolls
> horizontally, some unrelated cell colors also change
green and some of the
> data
> gets duplicated in the cells. The underlying data
provider's data is not
> confused however. Seems the rendering is screwed up when
the Datagrid
> scrolls.
>
> Did you find a solution to this problem? I think
Datagrid is a piece of
> screwed up code.
http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf
Q2 -
Datagrid Drop Down Item renderer Scroll Problem
Hi,
I am having a problem with an drop down item renderer on a Datagrid. When ever the datagrid is displayed and the cell is clicked on i want this to display a drop down list of objects. I can get the drop down to appear with the list of objects. H
owever the scrollbar does not work on this item to allow the user to scroll through all the objects. If you use the mouse wheel you can scroll down through them all but not when you try and click on the scroll bar to drag down. Below is the code used. Any advice why this might be happening??
<mx:DataGridColumn headerText="Widget"
dataField="WidgetName"
editable="true" headerWordWrap="false" textAlign="center" width="100"
editorDataField="Widget">
<mx:itemEditor>
<fx:Component>
<s:MXDataGridItemRenderer focusEnabled="true" height="22" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
private var selectedWidget:Widget = null;
public function get ccyPair():String {
return ddlCcyPairs.selectedItem.Widget;
override protected function commitProperties():void {
super.commitProperties();
trace("Commit .......");
protected function ddlCcyPairs_changeHandler(event:IndexChangeEvent):void {
for each(var ccyP:CurrencyPair in ddlCcyPairs.dataProvider) {
if (ccyP.ccyPair == ddlCcyPairs.selectedItem.ccyPair) {
selectedWidget = ccyP;
ddlCcyPairs.selectedItem = selectedWidget;
protected function ddlCcyPairs_creationCompleteHandler(event:FlexEvent):void {
for each(var ccyP:CurrencyPair in ddlCcyPairs.dataProvider) {
if (ccyP.ccyPair == data.ccyPairName) {
selectedWidget = ccyP;
ddlCcyPairs.selectedItem = selectedWidget;
]]>
</fx:Script>
<s:DropDownList id="ddlWidgets" width="100%"
dataProvider="{parentApplication.Widgets}"
labelField="name"
selectedItem="selectedWidget"
creationComplete="ddlWidgets_creationCompleteHandler(event)"
change="ddlWidgets_changeHandler(event)"/>
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>Hi, Post a test code.... It will be a lot easier to help you Mich
-
Datgrid and Item Renderer scrollling problem
Hello,
I have a Datgrid containign item rendrer as follows :
<mx:DataGrid width="800" id="gridSecondaire" styleName="dataGridStyle" verticalScrollPolicy="off" headerHeight="30" >
<mx:columns>
<mx:DataGridColumn rendererIsEditor="true"
editorDataField="result"
itemRenderer="com.cdf.intra_cmmi.view.advancedTree.BodyDetailDocumentRenderer" />
</mx:columns>
</mx:DataGrid>
The problem is I when i scroll the datagrid the rows do not stay in the same position how to solve this please ?Here the item Renderer
===================ITEM RENDRER==========================
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="28" width="388" creationComplete="init(event)" click="clickTexte(event);">
<mx:Script>
<![CDATA[
[Embed(source="images/icon/tree_defaultLeafIcon.png")]
public static const tree_defaultLeafIcon:Class;
[Embed(source="images/icon/tree_pptLeafIcon.png")]
public static const tree_pptLeafIcon:Class;
[Embed(source="images/icon/tree_xlsLeafIcon.png")]
public static const tree_xlsLeafIcon:Class;
[Embed(source="images/icon/anglais.png")]
private var anglaisIcon:Class;
import com.sqli.intra_cmmi.constants.ConstantAssets;
private function clickTexte(event:MouseEvent):void {
var fileReference:FileReference = new FileReference();
fileReference.download(new URLRequest(data.chemin_document));
private function init(event:Event):void {
import com.sqli.intra_cmmi.vo.DocumentVO;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
var nom_document:String =data.nom_document as String;
var description_document:String = data.description_document as String;
var language_document:String =data.language_document as String;
var ext:String = data.ext as String;
var type:String = data.type_document as String;
var chemin_document:String = data.chemin_document as String;
switch (type)
case "Modèle":
imageTypeDoc.source = ConstantAssets.modele;
break;
case "Guide":
imageTypeDoc.source = ConstantAssets.guide;
break;
case "Document":
imageTypeDoc.source = ConstantAssets.document;
break;
case "Outils":
imageTypeDoc.source = ConstantAssets.outils;
break;
case "Check-liste":
imageTypeDoc.source = ConstantAssets.checklist;
break;
default:
imageTypeDoc.source = ConstantAssets.document;
nom.text=nom_document+' ('+ext+')';
if(language_document!='1036'){
imageAnglais.source=anglaisIcon;
if(description_document!=""){
imageDescription.source=anglaisIcon;
]]>
</mx:Script>
<mx:Image id="imageTypeDoc" x="5" y="5" height="15" width="15" />
<mx:Text x="23" y="3" width="326" id="nom"/>
<mx:Image x="351" y="5" height="15" width="15" id="imageAnglais"/>
<mx:Image x="370" y="5" height="15" width="15" id="imageDescription"/>
</mx:Canvas>
======================Main.MXLM (Blue Code part) ===============================
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="830" creationComplete="init()">
<mx:Script>
<![CDATA[
import com.sqli.intra_cmmi.services.MainService;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import com.sqli.intra_cmmi.controller.ProduitController;
import com.sqli.intra_cmmi.services.VerticalMenuService;
//import com.sqli.intra_cmmi.services.MainService;
import com.sqli.intra_cmmi.vo.ProduitVO;
import mx.controls.Alert;
public var objectList : Array = new Array();
public function init():void
myProc.listeDomaineProcessus();
if(VerticalMenuService.getInstance().produitVerticalMenu.getChildren().length > 0)
// On positionne l'accordion des produits sous l'accordion commun
VerticalMenuService.getInstance().produitVerticalMenu.y = VerticalMenuService.getInstance().verticalMenu.height - 49;
MainService.getInstance().lefter.addChild(VerticalMenuService.getInstance().produitVertic alMenu);
var id:String;
id=ProduitController.getInstance().currentProduitId;
if(id!=null)
myProd.getProduitDescription(id);
myProd.getDocumentPrincipauxByProduit(id,1);
myProd.getDocumentSecondaireByProduit(id,0);
myProd.getRolesProduit(id);
myProd.getAjustementProduitByID(id);
private function getDataListener_listeDomaineProcessus(event:ResultEvent):void
//refPhase= new ArrayCollection();
this.objectList = event.result as Array;
// Peupler l'accordion
ProduitController.getInstance().populateVerticalMenu(this.objectList);
private function getDataListener_getDocumentSecondaireByProduit(event:ResultEvent):void
var obje:Array = event.result as Array;
if(obje.length>0)
gridSecondaire.dataProvider = event.result as Array;
gridSecondaire.rowHeight = 33;
gridSecondaire.height = obje.length*33+30;
var maximumHeight : int = 228;
if ( gridSecondaire.height > maximumHeight){
gridSecondaire.verticalScrollPolicy = "on";
gridSecondaire.height = maximumHeight;
else
gridSecondaire.visible=false;
gridSecondaire.includeInLayout=false;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Peupler l'accordion (rafraichissement lors du passage d'une rubrique à une autre)
ProduitController.getInstance().populateVerticalMenu(this.objectList);
private function getDataListener_getProduitDescription(event:ResultEvent):void{
description.title=ProduitVO(event.result).nom_produit;
idPanelDescription.htmlText=ProduitVO(event.result).description_produit;
private function faultListener(event:FaultEvent):void {
Alert.show(event.fault.message, "Error");
]]>
</mx:Script>
<mx:VBox verticalGap="20" horizontalCenter="0" top="10" bottom="10">
<mx:Panel width="800" height="121" id="description" styleName="stylePanel" >
<mx:Label paddingLeft="5" paddingRight="5" paddingTop="40" width="100%" id="idPanelDescription"/>
</mx:Panel>
<mx:DataGrid width="800" id="gridSecondaire" styleName="dataGridStyle" verticalScrollPolicy="off" headerHeight="30" >
<mx:columns>
<mx:DataGridColumn rendererIsEditor="true" editorDataField="result"
itemRenderer="com.sqli.intra_cmmi.view.advancedTree.BodyDetailDocumentRenderer"
headerText="Documents secondaires"/>
<mx:DataGridColumn rendererIsEditor="true" editorDataField="result" dataField="livrable_document" headerText="Livrables" width="100"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:RemoteObject id="myProc" destination="zend" source="ProcessusService" showBusyCursor="true" fault="faultListener(event)">
<mx:method name="listeDomaineProcessus" result="getDataListener_listeDomaineProcessus(event);" />
</mx:RemoteObject>
<mx:RemoteObject id="myProd" destination="zend" source="ProduitsService" showBusyCursor="true" fault="faultListener(event)">
<mx:method name="getRolesProduit" result="getDataListener_getRolesProduit(event);" />
<mx:method name="getDocumentPrincipauxByProduit" result="getDataListener_getDocumentPrincipauxByProduit(event);" />
<mx:method name="getDocumentSecondaireByProduit" result="getDataListener_getDocumentSecondaireByProduit(event);" />
<mx:method name="getAjustementProduitByID" result="getDataListener_getAjustementProduit(event);" />
<mx:method name="getProduitDescription" result="getDataListener_getProduitDescription(event);" />
</mx:RemoteObject>
</mx:Canvas> -
Strange Problem with datagrid item renderer in flash palyer 10
Hi All
In Flash player 10 when i use a text input as a item renderer in grid with a custom textinput skin , it does not show us the text , where as in flash player 11 it shows us. is there any work around for it or it's a bug.
Plz help me on this.The url works for me. Please verify that you entered it correctly. There are other sites that will verify your player version. Search for them, pick one and report the results.
Before you file a bug, it is probably best to do some investigation first to make sure it isn’t a known issue or an issue in your code. -
Problems regarding a cutoms item renderer
Hello,
I have created a custom item renderer whcih contains two labels and a button. this list is populated on a sertain event. but this list behaves very weird when the triggering event is triggered second time and so on.
What happens is the content set to labels labelFuntion are chaned or changes their place if I set them dynamically. And they do not change even if I want to when they are placed statically. I am attaching my code herewith
<?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"
left="5" autoDrawBackground="false" creationComplete="_initializeHandler(event)"
fontSize="12" fontWeight="bold" resize="itemrenderer1_resizeHandler()"
width="100%" cachePolicy="on">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;
import skins._alert;
import skins.creoCustomButtons;
import skins.logoutConf;
import spark.components.CheckBox;
import spark.events.PopUpEvent;
private var but:Button;
private var a:_alert;
public var timer2:Timer;
import spark.components.Button;
private var cb:CheckBox;
private var confirmation:logoutConf;
private var tempo:String;
public static var _temp_array:Array = new Array();
import skins.radioButtonList;
public var _billingCycle:radioButtonList;
public var subOptions:ArrayCollection;
[Bindable]public var initiator:int = 0;
public static var config_data_Temp:ArrayCollection = new ArrayCollection();
public static var counter:int = new int();
public function confirmAction(event:MouseEvent):void{
// config_data_Temp.removeItemAt(data.subOptions[this.data].name);
subOptions = new ArrayCollection(data.subOptions);
_billingCycle = new radioButtonList;
_billingCycle.dataProvider = subOptions;
_billingCycle.labelField = "name";
_billingCycle.width = stage.width;
_billingCycle.height = stage.height ;
_billingCycle.addEventListener(PopUpEvent.CLOSE, selectedValue);
_billingCycle.open(this,true);
public function selectedValue(event:PopUpEvent):void{
if(event.commit){
var selectedItems:Vector.<Object> = event.data as Vector.<Object>
for(var i:int = 0; i<GlobalData.configurations_data.length; i++){
var tempo:String = GlobalData.configurations_data.getItemAt(i,0).toString();
//if(config_data_Temp[i]==this.name)
if(tempo==btn.label.toString())
GlobalData.configurations_data.removeItemAt(i);
GlobalData.configurations_data.addItemAt(selectedItems[0].name, i);
_price.text = GlobalData.configurations_data[i].price;
type.text = selectedItems[0].name;
btn.label = selectedItems[0].name;
//GlobalData.configurations_data = null;
//GlobalData.configurations_data = config_data_Temp;
private function processRequest(event:PopUpEvent):void{
if(event.commit)
_temp_array.push(data.domain_name+data.tldname);
GlobalData.domain_name_data = _temp_array;
a = new _alert();
a.title = "Request Status";
a.message = "Your request is successfully processed.\n Check you email account for details";
a.open(this.parent, true);
PopUpManager.centerPopUp(a);
timer2 = new Timer(2000, 1);
timer2.addEventListener(TimerEvent.TIMER_COMPLETE,timerComplete2);
timer2.start();
Timer coplete event closing the current displayed popup
text="{data.subOptions[0].optFees}"
label="{data.subOptions[0].name}"
public function timerComplete2(event:TimerEvent):void
a.close()
public function itemrenderer1_resizeHandler():void{
if(but){
but.x = (this.parent.width-but.width)-10;
if(confirmation)
PopUpManager.centerPopUp(confirmation);
if(a)
PopUpManager.centerPopUp(a);
public var myButon:Button;
protected function _initializeHandler(event:FlexEvent):void
btn.label = data.subOption[0].name;
]]>
</fx:Script>
<s:HGroup height="30" width="100%" verticalAlign="middle" gap="0">
<s:Label width="30%" text="{data.name}"
fontSize="10" fontWeight="normal" id="type"/>
<s:Label id ="_price" width="10%"
fontSize="10" fontWeight="normal"/>
<s:Button fontSize="12" fontWeight="normal"
skinClass="skins.creoCustomButtons" chromeColor="#ffffff"
click="confirmAction(event)" width="60%" id="btn"/>
</s:HGroup>
</s:ItemRenderer>
NOTE: [ Please ignore comments and import statements ]
The button pops up a radio button list. After an item is clicked the selected text should be placed on button permenantly, which is not happening in current scenario.
Any kind of help is appreciated!Hi Karthik
to where u are dragging this record from grid...? the second component also ready to accept the same type of records when u drag form grid to second component.. that is the scenario.. -
Spry Menu Bar 2.0 (1.0) - Handling of widget generated CSS, placement and rendering problems in CSS
Hello:
I wanted to repost my question to re-frame the issue based on what I have learned thus far.
I am working on a website that has been developed using the Spry Menu Bar Framework UI (2.0) I.0, that has some peculiar rendering problems that affect IE 6 in particular. The CSS is reprinted below.
In particular, when I post the widget generated CSS in the head as it is orginally situated by the framework, the menu bar works fine. However, it seemed to me that I should be able to reduce page weight (an important consideration considering my target population) by placing it in the general style sheet governing the entire site.
When I place the styles at the beginning of the style sheet the menu doesn't render at all in any of the browsers (IE 6+, Firefox, Opera, Safari, Netscape, etc.) as it conflicts with the general rules governing links that appear later in the style sheet. When I place the styles specific to the Menu bar at the end of the style sheet, then the menu bar renders properly in all browsers except IE 6.
The odd thing is that the only way to ensure that the menu bar works in IE 6 is to keep the menu related styles in the head of each page. This raises problems related to page weight (not an insurmountable consideration if no other solution can be found) but still an issue. Likewise I need to support IE 6, again given the target audience/population. The issue obviously has something to do with specificity, but I am not certain that is the only consideration at work here. I have not tried the !important selector in regard to the menu, as IE 6 seems to only partially support this.
Thanks in advance for any advice or insight that can be provided. Thanks in particular to Martin for his contributions to my earlier question related to this issue.
Steve Webster.
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
* all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style>
The CSS governing the site generally is reproduced below: (my belief is that it is the a:link, a:visited, a:hover, a:active styles that may be in conflict).
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
min-height: 0; /* This is necessary to overcome the "haslayout" bugthat is found in Windows 7 in conjuction with IE8. For Moreinformation see: URL -- http://reference.sitepoint.com/css/haslayout.html */
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align:center; /* This allows for the centering of the container and overcomes a bug inherent in IE 5 */
color: #000000;
list-style-image: none;
background-color: #FCFCFC;
h1,h2,h3,h4,h5,h6 {
color:#000066;
a:link {
color: #151A96;
text-decoration: underline;
a:visited {
text-decoration: underline;
color: #1B8DCD;
a:hover {
text-decoration: none;
color: #F30A0A;
a:active {
text-decoration: underline;
color: #151A96;
#container {
width: 960px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection %20_960.png);
background-repeat: repeat-y;
#header {
padding: 0; /* this padding matches the left alignment of the elementsin the divs that appear beneath it. If an image is used in the #headerinstead of text, you may want to remove the padding. */
width:960px;
height:332px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960 .png);
background-repeat:no-repeat;
#header h1 {
margin-right: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
display:none;
#header img {
display: none;
#Main_nav_contents {
padding: 0;
margin-top: 0px;
height: 39px;
width: 950px;
padding-top: 275px;
padding-left: 39px;
z-index: 3;
#MenuBarVertical {
margin-bottom: 50px;
padding-top: 50px;
padding-bottom:200px;
padding-left: 15px;
padding-right: 15px;
.mainContent_left {
margin: 0;/* the right margin on this div element creates the columndown the right side of the page - no matter how much content thesidebar1 div contains, the column space will remain. You can removethis margin if you want the #mainContent div's text to fill the#sidebar1 space when the content in #sidebar1 ends. */
padding-left:30px;
padding-right:20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
width: 600px;
float: left;
.sidebar_right {
float: right; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:0;
margin-right:10px;
font-size:90%;
.mainContent_right {
margin-left: 10px;
padding-left:30px;
padding-right:20px;
width: 600px;
float: right;
.sidebar_left {
float: left; /* since this element is floated, a width must be given */
width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
margin-top: 30px;
margin-left:30px;
margin-right:0;
overflow: hidden;
font-size:90%;
.main_content_centered {
width: 650px;
margin-left: 155px;
.main_content_centered_header {
margin-left: 75px;
.sidebar_textbox {
margin: 0px;
width: 260px;
padding: 2px;
.sidebar_textbox_header {
width:255px;
height:58px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Header.png);
.sidebar_textbox_background_middle {
width: 255px;
padding-top: 12px;
padding-bottom: 10px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Por trait%20Textbox%20Middle.png);
background-repeat: repeat-y;
.sidebar_textbox_content {
/* The width and padding are set as follows to accomodate quirks inbrowser rendering and to ensure that text is contained within thebackground of the text box */
width: 230px;
padding-left: 20px;
padding-right: 40px;
.sidebar_textbox_footer {
width:255px;
height:64px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Port rait%20Textbox%20Footer.png);
#issues_menu a:link {
color: #151A96;
text-decoration: none;
font-weight:bold;
#issues_menu a:visited {
color: #151A96;
font-weight:bold;
text-decoration: none;
#issues_menu a:hover {
color: #F30A0A;
font-weight:bold;
font-style: oblique;
text-decoration: none;
#issues_menu a:active {
color: #151A96;
font-weight:bold;
text-decoration: none;
#archives {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0px;
.landscape_textbox {
width: 500px;
margin-right: 0px;
margin-left: 30px;
padding-top:35px;
padding-bottom: 25px;
font-style: normal;
font-weight: normal;
.landscape_textbox_hdr {
width:500px;
height:38px;
margin:auto;
padding:0;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%2 0Header.png);
.landscape_textbox_middle {
width:auto;
margin:auto;
padding-top: 12px;
padding-bottom: 12px;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/lan dscapte%20Textbox%20Middle.png);
background-repeat:repeat-y;
.landscape_textbox_content {
width:450px;
padding:25px;
.landscape_textbox_ftr {
width:500px;
height:44px;
margin:auto;
padding:0;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Lan dscape%20Textbox%20Footer.png);
#footer {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
width: 960px;
height: 222px;
background-image:
url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_ 960.png);
background-repeat:no-repeat;
#footer p {
margin: 0px; /* zeroing the margins of the first element in the footerwill avoid the possibility of margin collapse - a space between divs */
padding:0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align:center;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
font-size: small;
#footer h5 {
text-align:center;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.dropcap {
display: block;
float: left;
line-height: 80%;
font-size: 250%;
font-weight: bolder;
color: #000066;
padding: .03em .1em 0 0;
.red_arrows {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
.blue_bullets {
list-style-position: outside;
list-style-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Fu ll.png);
.attention {
color: #F30A0A;
font-size:x-large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.attention_small {
color: #F30A0A;
font-size:large;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight:900;
.table {
table-layout:fixed;
.blue {
color: #00F;
#container .mainContent_left p .blue {
color: #0303A0;Hi Nancy:
The specific code that I am referring to is the CSS code governing the styling of the spry menu widget that only works in IE 6 if, and only if, it remains in the head of the web page. If removed and placed in a stylesheet, the IE plugins fail to compensate for the IE 6 "gap" bug. As I said, it doesn't make sense to me that, assuming specificity is addressed, that these can not be included in an external style sheet. I am looking for a) an explanation why they must remain embedded in the web page; and 2) any means by which I might be able to export them.
I will reproduce the specific css style (code) below: it should also be visable through reveal source --
Thanks again, Steve Webster.
The CSS governing the horizontal menu bar is as follows: (currently the following CSS is embedded in the head of the web page)
<style type="text/css">
/* -- Begins Spry Menu Widget 2.0 (1.0) Horizontal menu bar Custom styles -- */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or rightpointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, allsubmenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top levelmenu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets onthe same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:transparent;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on onMenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 17px;
font-style: normal;
padding:0;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 10px 10px 10px 4px;
background-color:#000088;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment-Dark.png);
background-repeat:repeat-x;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#ffffff;
background-color:transparent;
padding: 0px 18px 0px 5px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
font-style: normal;
background-color:#000088;
padding:0px 2px 0px 0px;
border-width:0px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: none;
padding: 0px;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 0px;
#MenuBar .SubMenu .MenuItemLast {
border-style: none none none none;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 10px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:transparent;
color:#ffffff;
padding: 10px 10px 10px 10px;
width: 240px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #2E35A3;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Nav igation%20Bar%20Segment%20Light2.png);
background-repeat:repeat-x;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color:#2E35A3;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: transparent;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: transparent;
min-width:0%; /* This keeps the menu from being skinnier than theparent MenuItemContainer - nice to have but not available on ie6 */
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of theMenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: transparent;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element forselection, such as "hover" (MenuItemHover) and "has a subMenu"(MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in aselector for an element. For a selector such as '.foo.bar.baz', IE6ignores
* all but the final classname (here, '.baz'), and sets thespecificity accordingly, counting just one of those classs assignificant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lotof these needed, the plugin does not generate the extra classes formodern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these,as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.jsscript.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser isInternet Explorer 6. This avoids the necessity of IE conditionalcomments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: transparent; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
/* Ends Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles */
</style> -
Check box rendering problem in List.
Hi All,
I am using list component in my app and list component allows multiple selections. I am using an itemrenderer having the checkbox and label in hbox.
Rendering is working fine. but when I selected three or four items randomly using check boxes in list and If I scroll it vertically (up and down) the selections of check boxes changedto another items. If I keep on doing this finally I will get all the check boxes selected. but I have selected only three check boxes.
I wanted get out of this problem. If i selected two or three checkboxes and when scroll it vertically it should remain as it is. Selections should not change... please help on this..
I am posting the code of Item renderer
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalGap="2"
width="100%" height="100%"
implements="mx.controls.listClasses.IDropInListItemRenderer"
initialize="init()"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
click="handleClick(event)">
<mx:Metadata>
[Event(name="checkBoxEvent", type="com.comp.name.ui.events.CheckBoxEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.controls.List;
import mx.controls.listClasses.ListData;
import com.comp.name.ui.events.CheckBoxEvent;
import com.comp.name.ui.filters.StringUtils;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _listData:BaseListData;
private var _list:List;
public function init():void
this.addEventListener(Event.CHANGE, onChangeEvent);
public function get listData() : BaseListData
return _listData;
public function set listData( value:BaseListData ) : void
_listData = value;
if(listData)
_list = listData.owner as List
override public function set data(value:Object):void
super.data = value;
protected function handleClick(event:MouseEvent):void
if(check.selected)
check.selected = false;
else
check.selected = true;
protected function checkBoxSelected(event:Event):void
if(data)
if(check.selected){
dispatchEvent(new CheckBoxEvent(CheckBoxEvent.CHECKBOX_EVENT, data.mx_internal_uid,data as Object, true,true));
}else
dispatchEvent(new CheckBoxEvent(CheckBoxEvent.CHECKBOX_EVENT, data.mx_internal_uid,data as Object, false,true));
protected function onChangeEvent(event:Event):void
]]>
</mx:Script>
<mx:CheckBox id="check" change="checkBoxSelected(event)" click="handleClick(event)"/>
<mx:Label id="lb" width="100%" height="100%" htmlText="{_list.labelFunction(data)}"/>
</mx:HBox>
I have faced this problem in so many times in so many list component.. Please help me on this...Can any one please give a reply .. If you dont understand it please let me .. I will give you detailed explanation.. Please it is an urgent requirement..
Maybe you are looking for
-
Is it possible to change the bounds of a progressBar? (to a different shape
I want to draw the shape of a battery, and use it as a progress bar. Now I know I can do this from scratch, and I have done a test case, but it simply doesn't look as good as the JProgressBar does. I have tried reading the JProgressBar class, to see
-
I am trying to make a duty time calculation but i can not find out how to add hours. eg. 0800am till 0900pm = calculates 13 hours any suggestions
-
Numbers cannot open an excel file (in my ipad).
Numbers cannot open an excel file (in my ipad) sent from an email. I get this message: "the document can't be opened because it contains cells outside the boundaries of Numbers"...what this means?
-
Mac Pro for Pro/E & Mechanica WF3.0
Hi Guys/Gals, We are looking to purchase a workstation to perform Pro/Engineer modelling and Mechanica simulations. We'll also be running AutoCAD 2008 Mechanical. Our intent is to install Windows XP x64 via boot camp and get the same stability that c
-
If I have standard button, I use the 'click=dosomething()' attribute in MXML. However this doesn't appear to work if you are using the keyboard to navigate. What event do you use in this case? Joc