0 Replies Latest reply on Jan 24, 2007 10:46 AM by AximX5User

    Help with Dynamic Objects

    AximX5User
      Hi All,

      New to Flex and wanted to get some help from the public. Basically, here's what I want to do.

      I have a tab navigator with multiple tabs. Each tab has a datagrid on it. When you click the tab, the grid should update to new data based on the tab clicked. That's no problem. The problem I'm running into is that because the data is taking a while to retreive from the server, users are getting the previous's tabs datagrid until the information is updated. I wanted to do two things:

      1) Change the cursor to a "thinking" or "processing" icon where clicks can't be done until the full data has been retreived and updated. This is a nice to have; i haven't the slightlest clue on how to accomplish this.

      2) In lieu/addition to #1, i wanted the datagrid to be dynamic. Meaning, if you go to the tab, it'll add dynamically the datagrid to the tab and then show the data.

      Here's my code, but it doesn't work very well. Any help i can get from you guys would be great:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal" initialize="createDataGrid()">
      <mx:Script>
      <![CDATA[
      import mx.controls.DataGrid;
      import mx.managers.PopUpManager;
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import mx.containers.HBox;
      import mx.containers.TabNavigator;

      [Bindable]
      private var infoDataGrid:ArrayCollection;

      [Bindable]
      private var currentID:String;

      [Bindable]
      private var dynDataGrid:DataGrid;

      private function createDataGrid():void {
      dynDataGrid = new DataGrid;
      dynDataGrid.dataProvider=infoDataGrid;
      dynDataGrid.width=80;
      }

      private function getDataFromServer(event:ResultEvent):void {
      var numOfRecords:int = event.result.result_set.num_rows;
      if (numOfRecords > 0 ) {
      infoDataGrid = event.result.result_set.results.result as ArrayCollection;
      } else {
      // no information retrieved worry about this later
      }
      }
      private function mainBuilder( event:Event ):void {
      var tabNavigator:TabNavigator = TabNavigator( event.target );
      var pattern:RegExp = /\D/gi;

      if (tabNavigator.selectedChild.id != "NewTab") {
      // Remove all non-digits from LID
      var str:String = tabNavigator.selectedChild.id;
      currentID=(str.replace(pattern, ""));
      phpHTTPService.send();

      // loop through all children and remove any datagrids while adding to the current one
      for (y=0; y<tabNavigator.numChildren; y++) {
      var tmpNavID:String = tabNavigator.childDescriptors[y].id
      if ((tmpNavID == tabNavigator.selectedChild.id) && (tmpNavID != "")) {
      // this does not work as intended...
      tabNavigator.selectedChild.addChild(dynDataGrid);
      } else {
      // this does not work.
      //How do you access something directly with an ID but represented by a variable?
      // tmpNavID.removeChildAt(0);
      }

      }
      } else {
      // New Tab selected, do something here
      }

      }
      ]]>
      </mx:Script>

      <mx:HTTPService id="phpHTTPService" url="/flex/php/AssetsInLocation.php" useProxy="false" method="GET" result="getDataFromServer(event)">
      <mx:request xmlns="">
      <lid>{currentID}</lid>
      </mx:request>
      </mx:HTTPService>
      <mx:TabNavigator id="tabNav" creationComplete="tabNav.selectedIndex=0;mainBuilder(event)" width="100%" change="mainBuilder(event);">
      <mx:HBox id="LID2345" label="Tab 1" width="100%" height="100%" horizontalAlign="center">
      <!-- <mx:DataGrid dataProvider="{infoDataGrid}" width="80%"/> -->
      </mx:HBox>
      <mx:HBox id="LID1111" label="Tab 2" width="100%" height="100%" horizontalAlign="center">
      <!-- <mx:DataGrid dataProvider="{infoDataGrid}" width="80%"/> -->
      </mx:HBox>
      <mx:HBox id="LID1234" label="Tab 3" width="100%" height="100%" horizontalAlign="center">
      <!-- <mx:DataGrid dataProvider="{infoDataGrid}" width="80%"/> -->
      </mx:HBox>
      <mx:Canvas id="NewTab" label="New..." width="100%" height="100%">
      </mx:Canvas>

      </mx:TabNavigator>

      </mx:Application>

      Thanks all for your assistance.