I have a <mx:Script> on the main file, where I define this:
[Bindable]
private var dpCols:ArrayCollection = new ArrayCollection([
{'prx':'bl', 'nmb':'Blanco', 'ral':'RAL1013', 'hex':'E8E4CD'},
{'prx':'am', 'nmb':'Amarillo', 'ral':'RAL1005', 'hex':'C79E03'},
{'prx':'gr', 'nmb':'Gris Perla', 'ral':'RAL7045', 'hex':'8E939E'}
]);
I can use it as a dataProvider in many places, but not here:
<mx:TileList dataProvider="{dpCols}">
<mx:itemRenderer>
<mx:Component>
<mx:Box backgroundColor="{int('0x' + data.hex)}"
height="64" width="72">
<mx:Label text="{data.ral}" textAlign="center" width="100%"/>
<mx:Label text="{data.nmb}" textAlign="center" width="100%"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
This TileList is within a <radg:RaDG> (my subclass for AdvancedDataGrid), <radg:columns>, <mx:AdvancedDataGridColumn>, <mx:itemEditor> and <mx:Component>. If I put it outside, it just works. But I need it to put it has the itemEditor.
How should I refer to dpCols then? (or how can I solve this error?)
Thanks!
You need outerDocument, since you're inside the <mx:Component> tag. See the "Using the Component Tag" section in this Adobe docs page or this SO question.
If you're getting particularly tricky with nesting, you may need to use parentDocument instead, but it sounds like outerDocument should work in your case (only one nesting of <mx:Component> tags).
Usage:
<mx:TileList dataProvider="{outerDocument.dpCols}" />
Related
I'm loading some images from a database using a PHP script through CodeIgniter, but when I try to add an event handler to do some stuff with these images, Flex compiler is showing me an error:
1180: Call to a possibly undefined method cloneCar.
Why I can not add an event handler in this context?
<mx:Accordion>
<mx:Form id="menu5" label="Prueba" width="100%" height="100%" backgroundColor="#707070" icon="{roadIcon}">
<mx:DataGrid x="251" y="95" dataProvider="{traffic_signals.lastResult..signal}"
showHeaders="false"
horizontalGridLines="false"
selectionColor="#707070"
themeColor="#707070"
alternatingItemColors="[#707070, #707070]"
borderColor="#707070"
rollOverColor="#707070">
<mx:columns>
<mx:DataGridColumn dataField="source" >
<mx:itemRenderer >
<mx:Component >
<mx:Image width="94" height="94" mouseDown="cloneCar(event)"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Form>
</mx:Accordion>
Without mouseDown sentence, everything works fine, but I need to allow drag 'n' drop (and other features) with these images.
Thanks!
EDIT:
cloneCar method defined like this:
private function cloneCar(e:MouseEvent):void
{
// do stuff
}
I solved my own problem. As 'awq' said, ItemRenderer scope is independent of global scope, so I need to declare my event handler function as public and link to it in mouseDown event using outerDocument directive:
public function cloneCar(e:MouseEvent):void
{
// do stuff
}
....
<mx:itemRenderer >
<mx:Component >
<mx:Image width="94" height="94" mouseDown="outerDocument.cloneCar(event)"/>
</mx:Component>
</mx:itemRenderer>
Guys I've a grid view in flex,
one of the columns is rendered like this:
<mx:DataGridColumn headerText="Cancel" >
<mx:itemRenderer>
<fx:Component>
<mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Download" width="100%" >
<mx:click>someFunction();</mx:click>
</mx:Button>
</mx:Box>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
now I've a problem that the function in button click is not being recognized. It says "call to a possibly undefined function" even though it was defined. What is wrong with this? How do i make a button in a grid call a function in the same mxml file??
thanks
Your itemRenderer is considered its own encapsulated component so it's looking for someFunction() within the itemRenderer itself. To call a function you have defined in the mxml file that contains your DataGrid, try calling the function using outerDocument.someFunction();.
If you would like to define the function at the itemRenderer level, you could do something like this:
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<fx:Script>
<![CDATA[
public function someFunction():void
{
// Do Something
}
]]>
</fx:Script>
<mx:Button click="someFunction();"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
I want to create a tilelist in which there would be different canvas or vbox etc, and i want to make them drag able.
I wrote a code to do this, but the output does not shows anything in a list.
<mx:TileList width="1500" height="1000" dragMoveEnabled="true"
selectable="true" selectionColor="#FFFFFF"
dragEnabled="true" dropEnabled="true"
columnCount="1" rowHeight="160">
<mx:dataProvider>
<mx:Array>
<mx:Canvas width="1450" height="100">
<mx:Button label="Testin the buttong"/>
</mx:Canvas>
<mx:Canvas width="1450" height="100">
<mx:Button label="Testin"/>
</mx:Canvas>
</mx:Array>
</mx:dataProvider>
</mx:TileList>
How can I fix this? Or let me know what m i doing wrong here?
Thanks and Regards
Zeeshan
Your dataProvider should have objects of some sort. In theory they could be instance of a Canvas, but that would be highly unusual to use a visual component as the dataProvider. What you want to do is read up on itemRenderers. an itemRenderer is a component that will be used to renderer each instance of your dataProvider.
Try something like this:
<mx:script><[[
public var mydb : Array = [
{label: 'Testin the buttong'},
{label: 'Testin'}
]
]]></mx:script>
<mx:TileList width="1500" height="1000" dragMoveEnabled="true"
selectable="true" selectionColor="#FFFFFF"
dragEnabled="true" dropEnabled="true"
columnCount="1" rowHeight="160" dataProvider="{mydp}">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="1450" height="100">
<mx:Button label="{data.label}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
In short I Defined the dataProvider in script with generic objects. And I defined an itemRenderer in-line. Something like this should at least have something show up.
I'm not sure if a Canvas can be draggable, as it doesn't usually have anything to click on to start the drag. You may want to consider a TitleWindow.
I wrote the code in browser, so standard disclaimers apply.
I have a TextArea inside an itemEditor component, the problem is that when typing in the TextArea if the enter key is pressed the itemEditor resets itself rather moving the caret to the next line as expected:
<mx:List width="100%" editable="true" >
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Array>
<mx:Object title="Stairway to Heaven" />
</mx:Array>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Text height="100" text="{data.title}"/>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextArea height="100" text="{data.title}"/>
</mx:Component>
</mx:itemEditor>
</mx:List>
</mx:Application>
Could anyone advise how I can get around this strange behaviour and make the enter key behave as expected?
Thanks,
Chris
The trick is to listen for the ITEM_EDIT_END event and prevent the default list behaviour if the reason is NEW_ROW. See example below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="onComplete();">
<mx:Script><![CDATA[
import mx.events.ListEvent;
import mx.events.ListEventReason;
import mx.controls.TextArea;
private function onComplete():void
{
list.addEventListener(ListEvent.ITEM_EDIT_END, onEndEdit);
}
private function onEndEdit(e:ListEvent):void
{
if (e.reason == ListEventReason.NEW_ROW)
e.preventDefault();
else
list.editedItemRenderer.data.title = TextArea(e.currentTarget.itemEditorInstance).text;
}
]]></mx:Script>
<mx:List width="100%" editable="true" id="list">
<mx:dataProvider>
<mx:Object title="Stairway to Heaven" />
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Text height="100" text="{data.title}"/>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextArea height="100" text="{data.title}"/>
</mx:Component>
</mx:itemEditor>
</mx:List>
</mx:Application>
Looks like the keypress of [enter] is being handled by your lists default function rather than your item renderers. Not sure what the exact code to fix that is, but I would think you would need to extend the list control that would nix the function when the user presses [enter]
Think you can use the "editorUsesEnterKey" of List.as (line 544 Flex3.5)
A flag that indicates whether the item editor uses Enter key.
I am making use of a custom cursor on itemRenderers in a List component. The custom cursor works just fine except when I mouse over the Text component which is a child of the itemRenderer at which point I get two cursors, the custom and an iBar one on top of the other.
Here's the code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.managers.CursorManager;
import mx.managers.CursorManagerPriority;
[Embed("grab.png")]
public static const grabbing:Class;
CursorManager.setCursor(grabbing, CursorManagerPriority.LOW, -16, -16);
]]>
</mx:Script>
<mx:List>
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Array>
<mx:Object title="Stairway to Heaven" />
</mx:Array>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data.title}"/>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
If anyone could help me figure out how to get rid of this iBar it would be much appreciated.
Thanks,
Chris
If you don't need to select the text, e.g. for copy-paste, you may just set the selectable attribute to false <mx:Text text="{data.title}"/ selectable="false">
I Think you probably need to extend the Text class your using in the item renderer and override something there.
FYI, anything in the <mx:Component> tag is out of scope with the rest of the file, so that Text class you're using in there doesn't even have access to the grabbing class you created.