I have a flex 3 datagrid that is in a completely separate container from the object that I am trying to reference it from - i.e. the datagrid is in a vbox, and I am trying to set a property in the datagrid from a popup.
How do I access the datagrid from the popup?
I'd like to do something like:
myView.myDatagrid.resizableColumns = false;
Using cairngorm as a framework if that is of any help.
You'll have to explain your architecture better to get a specific answer. This answer may help as everything I said about running methods on another component, also applies to accessing properties.
One solution for you is to pass the DataGrid instance into the popup as an instance variable; then the PopUp will be able to change the DataGrid's properties easy.
When you add your popup, you need to listen for an event. Then your PopUp needs to dispatch an event that the parent can handle.
myPopup.addEventListener(SomeEvent.DISABLE_COLUMNS,disableResize);
and then in the parent component
public function disableResize(event:SomeEvent):void{
myDatagrid.resizableColumns = false;
}
This assumes a custom event called SomeEvent... you can actually just create a default Flash event and give it a name like
dispatchEvent(new Event("MyDisableResizeEvent"));
Assuming you've got a button in your popup:
<mx:Button click="{dispatchEvent(new Event('MyDisableResizeEvent'));}" label="Disable Resizing"/>
Related
I'm developing a dynamic ItemRenderer to edition in line for Spark DataGrid.
With the Click event on Edit button (first column), I'm refreshing the cell's row using grid.invalidateCell(x,y); inside this custom ItemRenderer, in the function prepare, I'm evaluating an 'editing' dynamic property to hide/show (.visible/.includeInLayout) the default Label or Control for edition; I'm not using actually the itemEditor DataGrid's operation, just simulating this functionality.
Everything goes well with standard spark components for edition: TextInput, ComboBox, etc, but custom components (extended from SkinnableContainer) doesn't get visible, just randomically on first row sometimes.
Is there any specific interface that custom components must implement to work inside an ItemRenderer??
The problem was this property: customComponent.includeInLayout; once you set it to false, it has problems to get visible again. I think it's bad idea to use includeInLayout inside an ItemRenderer.
Now I'm working only with .visible=(false/true) and .x coordinate.
Thanks.
My application has a tree with a custom item renderer, which depending on the type of data at a leaf uses different components as editors. In one case I am trying to use a datagrid so that the user can choose a row that meets his needs (several columns need to be displayed), ie. similar in concept to a ComboBox.
To do this I have a function assigned to be the handler for 'itemEditBegin' (for the tree) in which I'm dynamically creating the datagrid, and then using the popup manager to display it as a (modal) popup. So far so good.
However, if you click anywhere (eg. scroll down button in the datagrid) the popup disappears because the itemEditEnd event is fired - why ?!
In another scenario, I have a DateField setup as the editor, and the user can click on the icon to bring up a DateChooser, scroll through the months, etc. I looked at the code behind this, and it is using a popup, seemingly in exactly the same way as my code !
Here is the 'itemEditBegin' code:
dataGrid = new DataGrid();
dataGrid.dataProvider = mddTable.dataCollection;
dataGrid.editable = false;
PopUpManager.addPopUp(dataGrid, this, true);
where 'this' is the component used by the tree renderer for a row. It is the tree component's 'itemEditEnd' handler that is being called as soon as anything inside the datagrid is clicked (eg. a row, scroll down button, column divider etc).
Any ideas anyone ?
Thanks,
Mike.
I guess I'd have to see code, or this working in practice to fully understand. It sounds like the individual DataGrid Columns are editable when you're using the DataGrid as an itemEditor. Is that correct?
When you focus out of an itemEditor in the DataGrid, it will fire the itemEditEnd event. Your tree must be reacting to this somehow. Try to stop the event propogation in your DataGrid class. Conceptually something like this:
<mx:DataGrid>
<mx:Script>
public function oItemEditEnd(event:DataGridEvent):void{
event.stopPropogation();
}
</mx:Script>
<mx:columns>
<mx:DataGridColumn itemEditEnd="onItemEditEnd(event)">
<mx:DataGridColumn itemEditEnd="onItemEditEnd(event)">
</mx:columns>
</mx:DataGrid>
If you do this, you're going to have to do something to figure out when the user is done editing and close the itemEditor manually.
More info on stopPropogation().. Also check out stopImmediatePropogation(). I'm not sure which one you'll need as it depends how your code is structured.
Eventually I found a solution that moreless fixes the problem. Simply adding in the line:
dataGrid.owner = this;
solved the premature itemEditEnd event problem. However, now I have the opposite problem, where the itemEditEnd event doesn't get fired until I click on another row of the tree !
I have an 'item clicked' listener on the datagrid which destroys the datagrid when one of the values is clicked, but just doing this doesn't cause the itemEditEnd event of the underlying tree row to fire. I read in the docs that the component losing focus causes it, so I dispatched my own 'FocusEvent.FOCUS_OUT' event - no good.
If I manually change the focus to the underlying tree, the itemEditEnd event does fire and all is good, but it seems a bit clunky to have to pass a reference of the tree to the tree renderer's row object !
Anyone have any better ideas ?
Thanks,
Mike
I've made a custom list itemRenderer with 2 buttons and a label. One button deletes the list entry (and thats not the problem) the second button would change the actual view.
Does anyone knows how I can change actual view within the itemrenderer ?
From what I think I understand, you want to change a viewstack or something. What you want to do is bubble an event from the itemRenderer up to a point in the display list where someone will listen and trigger an event handler which then changes the view.
So, in your itemRenderer do
dispatchEvent(new Event('someEventName', true));
And up the display list you need to listen for that even
this.addEventListener('someEventName', someHandlerFunction);
And in that function just switch your view or whatever else you want.
I have a spark list control whose data is rendered using an itemrenderer. Basically the Item renderer lays out the data within a Panel.
The Panel has a LinkButton, which when clicked needs to pass an Id to the parent application. In the parent application I have a function that dispatches a custom event to its parent. I want to know how to call this function from the ItemRenderer.
I tried using parentDocument.outerfunction etc but it throws an error..
Any clues ?
I would have your item renderer dispatch a custom event that contains your Id, making sure that your event bubbles. Then in the parent application listen for that event and call the appropriate function. Hope that helps.
If I understand well you can try to call from the item renderer this.parentApplication or this.parent.parent.
The best way is to create a custom event and bubble .. and add an event listener for that event in parent document..
this is working I have test parentcomponent(this.owner.parent).function...owner is list and parent is the component in which list is placed e-g InvitationList(this.owner.parent).invitationAccepted(persist);
type cast the this.owner.parent to your parentclass
If you were using PureMVC, you could send a notification that the receiver would handle and perform the needed work. This is similar to firing a custom event and receiving it in the parent.
I'm new to Flex, although not new to programming. I want to write a generic event handler that will be called by all my textinput boxes when they receive focus. When they have focus, I want to change the colour of the textinput box. When they lose focus, I want to restore the "inactive" color profile. I could write an ActionScript event handler for each textinput box, but we all know that's lame. :o) What I need, then, is a way to access the object which is calling the event handler.
In Delphi, I'd have written a function which passes in the Sender object, allowing me to access the calling object's properties. I'm guessing ActionScript/Flex has a completely different architecture, which is why I'm having difficulty doing this.
Thanks in anticipation!
You should subclass TextInput and handle the focus events in there. I think this would be the simplest way to achieve what you are looking for without having any complex code.
I hope I'm understanding what you're asking for... are you talking about event delegation?
This worked for me:
// 'focusOut' for blur
stage.addEventListener('focusIn', function(e:Event):void {
// The focused control is e.target
});
If you want to change the look of the focused input box, you can do this by setting the focusSkin property. If you want this to happen globally, you can put a style declaration in your CSS file.
In this CSS example I'm replacing the default focusSkin (mx.skins.halo.HaloFocusRect) with an embedded PNG file.
TextInput {
focusSkin: Embed(source="focus.png");
}
TextInput has a few properties for altering the look of the focus, like changing the opacity of the focus skin (focusAlpha property). Check the TextInput documentation for more info.