popup editor for datagrid items - hangs the browser

Question

i've got a pretty straightforward thing: a datagrid which renders some items. clicking on an item would bring up a popup editor (as the item has lots of properties and may not be edited right in the datagrid).

the popup contains just a form and a [Bindable] reference to the item it edits (which is passed from itemClick handler of the datagrid). form's default values are taken by binding to corresponding item properties with {} notion, while form values are bound back to the item using mx:Binding tags.

and now the problem. when the popup is brought up for the first time, everything is fine. however, when after being closed the popup is brought up again by clicking on the same item, the browser hangs (afaik because of change watchers being endlessly fired resulting in stackoverflow or something similar).

we have same behaviour in Safari, IE and Chrome, so i guess it's not to do with something browser-related. removing either [Bindable] from the item reference in the popup or mx:Binding tags from editors suppresses the problem, but of course the editing no longer works.

i'm banging my head against the wall for several days already, but still can't make it work. does it ring a bell to someone, what can be wrong in here (what can be damn easier that this)?

here's the code of the popup:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Details"
showCloseButton="true" close="PopUpManager.removePopUp(this);" creationComplete="PopUpManager.centerPopUp(this)">
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;
        import my.Detail;

        [Bindable] private var _documentDetail:Detail;

        public function set documentDetail(value:Detail):void {
            this._documentDetail = value;
        }

        public function set readOnly(value:Boolean):void {
            if (value) {
                this.currentState = "read-only";
            }
        }
    ]]>
</mx:Script>
<mx:states>
    <mx:State name="read-only">
        <mx:SetProperty target="{startDate}" name="enabled" value="false"/>
        <mx:SetProperty target="{comments}" name="enabled" value="false"/>
    </mx:State>
</mx:states>
<!--
<mx:Binding source="this.startDate.selectedDate" destination="_documentDetail.startDate"/>
<mx:Binding source="this.comments.text" destination="_documentDetail.comment"/>
-->
<mx:VBox width="100%" height="100%">
    <mx:FormItem label="{resourceManager.getString('eRequestAppli','startdate')}:" labelWidth="160" width="100%">
        <mx:DateField id="startDate" width="100%" selectedDate="{_documentDetail.startDate}" formatString="{resourceManager.getString('eRequestAppli', 'dateformat')}" editable="false"/>
    </mx:FormItem>
    <mx:FormItem label="{resourceManager.getString('eRequestAppli','comments')}:" labelWidth="160" width="100%" height="79">
        <mx:TextArea id="comments" width="100%" height="100%" text="{_documentDetail.comment}" editable="false"/>
    </mx:FormItem>
</mx:VBox>
</mx:TitleWindow>

here's how i call it:

        private function show(detail:Detail, readOnly:Boolean=false):void {
            var popup:fxc_ProposalDetail =
                fxc_ProposalDetail(PopUpManager.createPopUp(UIComponent(Application.application), fxc_ProposalDetail, true));
            popup.documentDetail = detail;
            popup.readOnly = readOnly;
        }

Answer 1

Thanks for posting the code. Now I might be able to help.

Where are you handling the close event of the popup? Besure to use something like this:

private function handleCloseEvent():void {
                PopUpManager.removePopUp(this);
            } 

Besides that it appears your problem has to do with the following:

Because a module is loaded into a child domain, it owns class definitions that are not in the main application’s domain. For example, the first module to load the PopUpManager class becomes the owner of the PopUpManager class for the entire application because it registers the manager with the SingletonManager. If another module later tries to use the PopUpManager, Adobe ® Flash® Player throws an exception.

The solution is to ensure that managers such as PopUpManager and any other shared services are defined by the main application (or loaded late into the shell’s application domain). When you promote one of those classes to the shell, the class can then be used by all modules. Typically, this is done by adding the following to a script block:

import mx.managers.PopUpManager;
private var popUpManager:PopUpManager;

The module that first uses the component owns that component’s class definition in its domain. As a result, if another module tries to use a component that has already been used by another module, its definition will not match the existing definition. To avoid a mismatch of component definitions, create an instance of the component in the main application. The result is that the definition of the component is owned by the main application and can be used by modules in any child domain.

see: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-799a.html for a better understanding of modules.

Answer 2

as suggested before, reusing the popup instead of creating a new one each time seems to have solved the issue.