0 Replies Latest reply on Nov 9, 2011 9:24 PM by Uttran

    ItemEditor closes automatically due to container resize

    Uttran

      Hi,

      I am having a datagrid and chart in a container. When I click the ItemEditor in datagrid, the chart will get updated.

      If I have the container height as 200, its works fine. But if its 201 then resize event for datagrid gets fired and its closes the itemeditor.

       

      Reason based on my analysis:

      initial height of datagrid = 131 (65%) and Vbox height = 70 (35%)

      when chart getting refreshed(after getting data from server), it updated the heights of the components.

      Datagrid height = 130 and Vbox height = 70 and 1 pixel remains. and the 1 pixel added again to datagrid.

      final height of datagrid = 131 and Vbox height = 70.

       

      Due to the above behavior, resize event getting dispatched and that event closes the itemeditor.

       

      Can anyone provide some suggestion to avoid this resize?

       

      Sample code: I used label instead of chart for sample.

      Sample.mxml

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                      minWidth="955" minHeight="600" layout="absolute">

          <mx:Script>

              <![CDATA[               

                  import com.components.myVBox;

                 

                  import flash.utils.setTimeout;

                 

                  import mx.collections.ArrayCollection;

                  import mx.controls.Alert;

                 

                  [Bindable]

                  private var myDP:ArrayCollection = new ArrayCollection([

                      {label1:"Order #2314", quant:3, Sent:true},

                      {label1:"Order #2315", quant:4, Sent:true},

                      {label1:"Order #2316", quant:5, Sent:true},

                      {label1:"Order #2317", quant:6, Sent:true},

                      {label1:"Order #2318", quant:7, Sent:false}    

                  ]);

                 

                  /** Detail panel view. */

                  internal var _detailPanelView:myVBox;

       

                  private function get detailPanelView():myVBox

                  {

                      if (!_detailPanelView)

                      {

                          _detailPanelView = new myVBox();

                      }

                     

                      return _detailPanelView;

                  }

                  private function addmychild():void

                  {

                      myVDivBox.addChild(detailPanelView);

                  }

                  protected function myDG_clickHandler(event:MouseEvent):void

                  {

                      if(!myVDivBox.contains(detailPanelView))

                      {

                          detailPanelView.percentHeight = 35;

                          addmychild();

                      }

                      detailPanelView.removeLabel();

                      setTimeout(detailPanelView.addLabel,200); // chart will get updated from server after some time.

                  }

                 

              ]]>

          </mx:Script>

          <mx:VDividedBox id="myVDivBox"

                          width="500"

                          height="{myStepper.value}"

                          verticalGap="0"

                          paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">

              <mx:DataGrid id="myDG"

                           dataProvider="{myDP}"

                           width="100%"

                           height="65%"

                           editable="true"

                           click="myDG_clickHandler(event)"

                           paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">

                  <mx:columns>

                      <mx:DataGridColumn dataField="label1" headerText="Order #"/>

                      <mx:DataGridColumn dataField="quant"

                                         editorDataField="text"

                                         headerText="Qty"

                                         itemEditor="mx.controls.TextInput"/>

                  </mx:columns >

              </mx:DataGrid>

          </mx:VDividedBox>

          <mx:HBox left="550">

              <mx:NumericStepper id="myStepper" value="200" stepSize="1" maximum="999"/>

          </mx:HBox>

      </mx:Application>

       

      myVBox.mxml

      <?xml version="1.0" encoding="utf-8"?>

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

               backgroundColor="0xFFFFFF"

               width="100%" height="100%"

               paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">

          <mx:Script>

              <![CDATA[

                  import mx.controls.Label;

                  private var myLabel:Label = new Label();

                 

                  public function addLabel():void

                  {

                      myLabel.text = "SampleText";

                      this.addChild(myLabel);

                  }

                 

                  public function removeLabel():void

                  {

                      if(this.contains(myLabel))

                      {

                          this.removeChild(myLabel);

                      }

                  }

              ]]>

          </mx:Script>

      </mx:VBox>