1. #1
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Thumbs up [Solved] Best practice, Two Grids and Load?

    [Solved] Best practice, Two Grids and Load?


    I have two grids loaded via an XHR. The first loads and then on the ds.on("load...) I load the other one but I think this is a bad idea. What is the best wa to get the second to load only after the first grid has loaded?

    Code:
     
      ds.on("load", 
       function(){
     
          Grid_rma_details.init();
          grid.selModel.selectFirstRow();
          grid.fireEvent("rowclick",this,0,null);
          Ext.get(document.body).unmask();
     
          } , this, true);

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,949
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I think your way is fine if you have to load them in that order.

  3. #3
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Great, thank you evant!

  4. #4
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    I am adding the below code because it is my example of having two grids on a single page and how to deal with loading the grids multiple times via an XHR (Ajax Request) into the same container div. While the process is nothing new I assume that it is not as common for newbies like myself. No laughing but I spent a week and a half trying to get this right. The below code works but I cannot say that it is perfect... I'm sure there are better ways to structure how I did this but it works without error. Note that the code does not contain the Ext.OnReady call so you should be adding that in or merely calling the init functions (as I have) at the proper place in your javascript code (if so make sure your divs are loaded and part of the DOM before you call the init function).

    In my situation the LISTING grid is the first grid rendered and the DETAILS grid uses the data selected in the LISTING grid in order to populate it with the associated data. I am adding this here and plan to reference this thread on the various other posts I created regarding the issues and errors I ran into while generating this. The experts can critique this in anyway and I hope they do if I am sending other newbies down a bad road : )

    My suggestion would be NOT to just copy this code but to use it to maybe see where you can modify your own to get it working. There is more than just creating grids going on here. Again, you've been warned so please try and avoid posting something like "I copied your code and tried to run it but it doesn't work".

    .js FUNCTION WHICH CREATES THE INITAL GRID:

    This is the javascript code I use to create the grid or reload only the data if the grid is already on the page. In my situation I need to call this via an onclick event.

    Code:
     
    function displayRMADashboard(listing)
    {
       if (Ext.get('listinggrid'))
       {
          Grid_rma_listing.reconfigure(listing);
       }
       else
       {          
          Grid_rma_listing.init();                                                 
       } 
    }
    LISTING GRID:

    This is the initial grid. The data contained in the DETAILS grid depends on what data is pulled into this grid and is selected.

    Code:
     
     
    var Grid_rma_listing = function() {
     
     // create variables that will be gloal to the object
     var ds;
     var grid;
     var columnModel;
     var dsContext;
     var gridForm;
     var paging;
     
     function setupDefaultDataSource() {
        ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'rma/_xml/xml_grid_rma.php'}),
            reader: new Ext.data.XmlReader({
                   record: 'Item',
                   totalRecords: 'TotalResults',
                   id: 'RMA'
               }, [
                   'createdate','rma_number', 'ticket', 'service_request', 'device', 'title', 'sr_type', 'sr_contract', 'owner'
               ])
        });
      ds.setDefaultSort('rma_number', 'ASC'); 
        ds.load({params:{start:0, limit:15}});
     
     }
     
     function changeDataSource(passed_value) {
        ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'rma/_xml/xml_grid_rma.php?passed_value=' + passed_value}),
            reader: new Ext.data.XmlReader({
                   record: 'Item',
                   totalRecords: 'TotalResults',
                   id: 'RMA'
               }, [
                   'createdate','rma_number', 'ticket','service_request', 'device', 'title', 'sr_type', 'sr_contract', 'owner'
               ])
        });
      ds.setDefaultSort('rma_number', 'ASC');
     
      ds.on("load", function(){ 
            grid.selModel.selectFirstRow();
          grid.fireEvent("rowclick",this,0,null);
     
      } , this, true);
     
      ds.on("loadexception", function(){ 
       Ext.Msg.alert("enView XML Load Error", 'There was a problem retrieving the RMA data from the server.  The server or network may not have been available at the time of your request.  Please try again.');
     
      } , this, true);  
     
     } 
     
     function getColumnModel() {
      if(!columnModel) {
       columnModel = new Ext.grid.ColumnModel(
        [
               {
          header: 'RMA',
          width: 60,
          sortable: true,
          dataIndex: 'rma_number',
          locked: true
         },
         {
          header: 'Service Request',
          width:70,
          sortable:true,
          dataIndex: 'service_request',
          locked: true
         },
         {
          header: 'Ticket',
          width:60,
          sortable:true,
          dataIndex: 'ticket',
          locked: true,
          renderer:  function(data, cell, record, rowIndex, columnIndex) {
           return data.toUpperCase (); 
          }
         },
         {
          header: 'Create',
          width:140,
          sortable:true,     
          dataIndex: 'createdate'
         },
         {
          header: 'Device',
          width:130,
          sortable:true,
          dataIndex: 'device',
          renderer:  function(data, cell, record, rowIndex, columnIndex) {
           return data.toUpperCase (); 
          }  
         },
         {
          header: 'Title',
          width:400,
          sortable:false,
          dataIndex: 'title'
         },
         {
          header: 'Contract',
          width:50,
          sortable:true,
          dataIndex: 'sr_contract'
         },
         {
          header: 'Type',
          width:35,
          sortable:true,
          dataIndex: 'sr_type'
         },
         {
          header: 'Owner',
          width:150,
          sortable:true,
          dataIndex: 'owner'
         }                         
        ]
       );
      }
      return columnModel;
     }
     
     function buildGrid() {
     
      gridForm = new Ext.BasicForm(
       Ext.get("updatelistinggrid"),
       {
     
       }
      );
     
      grid = new Ext.grid.EditorGrid(
       'listinggrid',
       {
        ds: ds,
        cm: getColumnModel(),
        monitorWindowResize:false,
          enableRowHeightSync:true,
        loadMask: {msg: 'Retrieving XML Data, Please Wait...'},
        listeners:{
                 'afteredit':function(oe){
                  alert("after edit");
                  alert("field"+ oe.field + "   value: "+ oe.value+" originalValue:" + oe.originalValue);
                  // return true; 
                 }},
     
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
       }
     
      );  
      grid.on('rowclick', function(grid, rowIndex, colIndex, e) 
      { 
        flipInformation(ds.data.items[rowIndex].id,rma_option_information); 
        rma_ = ds.data.items[rowIndex].id;
         var details_rma = Ext.get("rma_inject");
         details_rma.update('of RMA ' + ds.data.items[rowIndex].id)
        var slowClick = function() { 
     
          Grid_rma_details.reconfigure(ds.data.items[rowIndex].id);
     
         //Ext.get('detailsgrid').unmask();
        };
        //Ext.get('detailsgrid').mask('Retrieving XML Data, Please Wait...');
        // need to slow this down because the second grid must render first.
        slowClick.defer(50);   
     
     
      });
     
     function KillAndBuild()
     {
      var checkGrid = Grid_rma_details.doesGridExist();
         // alert('GRID RMA LISTING: Does the DETAILS grid exist?' + checkGrid);     
        if (checkGrid == true)
        {
         // alert('GRID RMA LISTING: Destroying DETAILS Grid');     
            Grid_rma_details.destroy();
        }
     
         var checkGrid = Grid_rma_details.doesGridExist();    
     
         if (checkGrid == false)
        {
         // alert('GRID RMA LISTING: Building DETAILS Grid');      
            Grid_rma_details.init();
        }
         var checkGrid = Grid_rma_details.doesGridExist();    
         // alert('GRID RMA LISTING: Does the DETAILS grid exist now?' + checkGrid);
          grid.selModel.selectFirstRow();
          grid.fireEvent("rowclick",this,0,null);
          Ext.get(document.body).unmask();
     }
     
      ds.on("load", function(){ KillAndBuild(); } , this, true);  
     
      grid.render();
     
      var gridFoot = grid.getView().getFooterPanel(true);
       // add a paging toolbar to the grid's footer 
       paging = new Ext.PagingToolbar(gridFoot, ds, {
       pageSize: 15,
       displayInfo: true,
       displayMsg: 'Displaying RMA\'s {0} - {1} of {2}',
       emptyMsg: "No RMA's to display"});    
     
     }
     
     return {
      init : function() {
       var checkifgridexists = Grid_rma_listing.doesGridExist();
       if (checkifgridexists) { Grid_rma_listing.destroy(true); }
       Ext.Element.garbageCollect();
       setupDefaultDataSource(); // step 1
       buildGrid();
      },
     
      getDataSource: function() {
       return ds;
      },
     
      destroy:function(boolVar){
       if (grid) 
       {
        // alert('Since Reference to LISTING Grid Exists, I am about to destroy it.');    
        grid.destroy(boolVar);
        grid = null;
        checkit = Grid_rma_listing.doesGridExist();
        // alert('After Attemp to Destroy LISTING Grid does Listing Grid Exist?' + checkit);    
         }
      }, 
     
      doesGridExist:function(){
       if (grid) 
       {
        return true;
       }
       else
       {
        return false;
       }
      },   
     
      reconfigure:function(passed_value){
       if (grid) 
       { 
        // alert('Inside reconfigure of Listing Grid')
        changeDataSource(passed_value);
        paging.unbind(ds);
        grid.reconfigure(ds,columnModel); 
        ds.load({params:{start:0, limit:15}}); 
        paging.bind(ds);
       }
      }   
     
     }
     
     
    }();
    DETAILS GRID:

    This is the grid that is generated or pupulated with data when the a row click happens on the LISTING grid.

    Code:
     
    var Grid_rma_details = function() {
     var ds; //hold our data
     var grid; //component
     var columnModel; // definition of the columns
     var dsContext;
     var gridForm;
     function setupDefaultDataSource() {
        ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'rma/_xml/xml_grid_rma_details.php'}),
            reader: new Ext.data.XmlReader({
          record: 'Item',
                   totalRecords: 'TotalResults',
                   id: 'PARTID'
               }, [
                   'line_number','part_number', 'description', 'shipped_serial'
               ])
        });
      ds.setDefaultSort('part_number', 'ASC');  
        ds.load({params:{start:0, limit:22}});
     }
     
     function changeDataSource(passed_value) {
        ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url: 'rma/_xml/xml_grid_rma_details.php?rma=' + passed_value}),
            reader: new Ext.data.XmlReader({
                   record: 'Item',
                   totalRecords: 'TotalResults',
                   id: 'PARTID'
               }, [
                   'line_number','part_number', 'description', 'shipped_serial'
               ])
        });
      ds.setDefaultSort('part_number', 'ASC'); 
     } 
     
     function getColumnModel() {
      if(!columnModel) {
       columnModel = new Ext.grid.ColumnModel(
        [
         {
          header: ' ',
          width: 35,
          // sortable: true,
          dataIndex: 'line_number',
          locked: true
         },    
         {
          header: ' ',
          width: 26,
          // sortable: true,
          dataIndex: '',
          locked: true,
          renderer:
           function(data) {
            return "<span style='padding:0;margin:0'><img src='_images/icons_silk/bullet_picture.png' style='vertical-align:top;padding:0;spacing:0;margin:0'></img></span>";
     
           }
         },                  
         {
          header: 'Part Number',
          width: 110,
          sortable: true,
          dataIndex: 'part_number',
          locked: true
         },
         {
          header: 'Part Description',
          width:350,
          // sortable:true,
          // hidden: true,
          dataIndex: 'description'
         },
         {
          header: 'Serial Number',
          width:90,
          // sortable:true,
          dataIndex: 'shipped_serial',
          editor: new Ext.grid.GridEditor(
           new Ext.form.TextField(
            {
            }
           )
          )
         }
        ]
       );
      }
      return columnModel;
     }
     
     function buildGrid() {
     
      gridForm = new Ext.BasicForm(
       Ext.get("updatedetails"),
       {
     
       }
      );
     
      grid = new Ext.grid.EditorGrid(
       'detailsgrid',
       {
        ds: ds,
        cm: getColumnModel(),
        enableRowHeightSync:true,
        monitorWindowResize:false,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
       }
      );
      grid.render();
      grid.getSelectionModel().selectFirstRow();
      Grid_rma_listing.isCreated = true;
     }
     
     return {
      init : function() {
       var checkifgridexists = Grid_rma_details.doesGridExist();
       if (checkifgridexists) { Grid_rma_details.destroy(true); }
       Ext.Element.garbageCollect(); // remove th
       setupDefaultDataSource();
        var constructDetailsGrid = function() { 
         buildGrid();
         //Ext.get('detailsgrid').unmask();
        };
        //Ext.get('detailsgrid').mask('Retrieving XML Data, Please Wait...');
        constructDetailsGrid.defer(10);
     
        // wait until default data source loads
        // then build grid
        // once grid built perform click on first row of listing grid
     
        // I think the click event was happening before the
        // listing grid was loaded (attempting a reconfigure)
     
     
      },
     
      getDataSource: function() {
       return ds;
      },
     
      destroy:function(boolVar){
       if (grid) 
       {
        grid.destroy(boolVar);
        grid = null;
        // alert('Details Grid Exists, Inside Destroy Function and nulled grid.')
        checkit = Grid_rma_details.doesGridExist();
        // alert('Does Grid Exist After Destroy and nulled:' + checkit);
       } 
      },
     
      doesGridExist:function(){
       if (grid) 
       {
        return true;
       }
       else
       {
        return false;
       }
      },  
      reconfigure:function(passed_value){
       if (grid) 
       {
        changeDataSource(passed_value);
        grid.reconfigure(ds,columnModel);
         // slow down reconfiguring the second grid.  Done to allow the grid to
         // first render and then regenerate the datastore.  This is a problem on 
         // fast links so if someone is running into this issue then up the defer 
         // time.    
     
        var reconfigureDetailsGrid = function() { 
         ds.reload();
         //Ext.get('detailsgrid').unmask();
        };
        //Ext.get('detailsgrid').mask('Retrieving XML Data, Please Wait...');
        reconfigureDetailsGrid.defer(0);
     
       }
      }    
     
     }
     
    }();
    HTML (THE DIV CONTAINERS WHICH WILL HOLD THE GRIDS):

    The below can either be on the same static page or loaded dynamically via an XHR.

    HTML Code:
     
    <div id="listinggrid" style="width:100%; height:100%;border: 1px solid #CCCCCC;" class="ygrid-mso"></div>
    <form id="updatelistinggrid" style="margin:0p;padding:0px"></form>
     
    <div id="detailsgrid" style="width:100%; height:100%;border: 1px solid #CCCCCC;" class="ygrid-mso"></div>
     
    <form id="updatedetailsggrid" style="margin:0p;padding:0px"></form>
     
    xml_grid_rma.php XML FILE GENERATED USING PHP:

    I used a database class I created to perform the queries, yours will differ but the syntax for the XML is correct.

    PHP Code:
    <?
    header
    ('Content-type: text/xml');
    echo 
    '<?xml version="1.0"?>';
    echo 
    '<Items>';
    require_once (
    "../../_classes/database.class.php");
    // Have to mysql escape on import because the grid is choking on characters.
    $database = new database;
    $database2 = new database;
    $database->query("SELECT 
          enview_rma.sr,enview_rma.rma,enview_rma.rma_create_date,
          enview_sr.sr_device,enview_sr.sr_title,enview_sr.sr_ticket,enview_sr.sr_type,
          enview_sr.sr_contract, author.group, author.region_default,
          author.baid, author.name
          FROM enview_rma
          LEFT JOIN enview_sr ON enview_sr.sr = enview_rma.sr 
          LEFT JOIN author ON enview_sr.sr_customer_email = author.email       
          GROUP BY enview_rma.rma 
          ORDER BY rma_create_date DESC 
          LIMIT "
    .$_POST['start'].", ".$_POST['limit'].""); 
    $database2->query("SELECT enview_rma.sr,enview_rma.rma,enview_rma.rma_create_date FROM enview_rma GROUP BY enview_rma.rma"); 
    $count $database2->num_rows();
    echo 
    ' <Request>'
    echo 
    '  <IsValid></IsValid>'
    echo 
    '  <ItemSearchRequest>';
    echo 
    '   <Author>Robert D. Cluett, Enterprise Network Support Services</Author>';
    echo 
    '   <Location>#######, #######</Location>';     
    echo 
    '   <Phone>(###) ### - ####</Phone>';     
    echo 
    '  </ItemSearchRequest>'
    echo 
    ' </Request>';
    echo 
    '  <TotalResults>'.$count.'</TotalResults>';
    echo 
    '  <TotalPages>'.'data here'.'</TotalPages>';   
    if ( 
    $database->num_rows() >= 1

     while (
    $record $database->fetch_array()) 
     { 
        echo 
    ' <Item>'
      echo 
    ' <RMA>'.$record['rma'].'</RMA>';  
      echo 
    ' <DetailPageURL>none</DetailPageURL>'
        echo 
    ' <ItemAttributes>';  
        echo 
    ' <createdate>'.$record['rma_create_date'].'</createdate>';            
        echo 
    '  <rma_number>'.$record['rma'].'</rma_number>';
        echo 
    '  <service_request>'.$record['sr'].'</service_request>';  
        echo 
    '  <device>'.$record['sr_device'].'</device>';       
        echo 
    '  <title>'.$record['sr_title'].'</title>';     
        echo 
    '  <ticket>'.$record['sr_ticket'].'</ticket>';       
        echo 
    '  <sr_type>'.$record['sr_type'].'</sr_type>';     
        echo 
    '  <sr_contract>'.$record['sr_contract'].'</sr_contract>';      
        echo 
    '  <owner>'.$record['name'].'</owner>';        
        
    //echo '  <service_request_title>'.$record['service_request_title'].'</service_request_title>';
        //echo '  <device>'.$record['device'].'</device>';
        //echo '  <vendor>'.$record['vendor'].'</vendor>';  
        
    echo ' </ItemAttributes>';     
        echo 
    ' </Item>';    
     }

     
    echo 
    ' </Items>';
    ?>
    xml_grid_rma_details.php XML FILE GENERATED USING PHP:

    I used a database class I created to perform the queries, yours will differ but the syntax for the XML is correct.

    PHP Code:
     
    <?
    header
    ('Content-type: text/xml');
    echo 
    '<?xml version="1.0"?>';
    echo 
    '<Items>';
    require_once (
    "../../_classes/database.class.php");
    if (isset(
    $_GET['rma']))
    {
     
    $database = new database;
     
    $database2 = new database;
     
    $database->query("SELECT enview_rma.line_number,enview_rma.shipped_item,enview_rma.shipped_item_desc,enview_rma.shipped_serial FROM enview_rma WHERE enview_rma.rma='".$_GET['rma']."'"); 
     
    $database2->query("SELECT enview_rma.shipped_item,enview_rma.shipped_item_desc FROM enview_rma WHERE enview_rma.rma='".$_GET['rma']."'"); 
     
    $count $database2->num_rows();
     echo 
    ' <Request>'
     echo 
    '  <IsValid></IsValid>'
     echo 
    '  <ItemSearchRequest>';
     echo 
    '   <Author>Robert D. Cluett, Enterprise Network Support Services</Author>';
     echo 
    '   <Location>#######, ########</Location>';     
     echo 
    '   <Phone>(###) ### - ####</Phone>';     
     echo 
    '  </ItemSearchRequest>'
     echo 
    ' </Request>';
     echo 
    '  <TotalResults>'.$count.'</TotalResults>';
     echo 
    '  <TotalPages>'.'data here'.'</TotalPages>';   
     if ( 
    $database->num_rows() >= 1
     { 
      while (
    $record $database->fetch_array()) 
      { 
         echo 
    ' <Item>'
       echo 
    ' <PARTID>'.$record['shipped_item'].'</PARTID>';  
       echo 
    ' <DetailPageURL>none</DetailPageURL>';     
         echo 
    ' <ItemAttributes>';    
         echo 
    '  <line_number>'.$record['line_number'].'</line_number>';    
         echo 
    '  <part_number>'.$record['shipped_item'].'</part_number>';
         echo 
    '  <description>'.$record['shipped_item_desc'].'</description>';
         echo 
    '  <shipped_serial>'.$record['shipped_serial'].'</shipped_serial>';    
         echo 
    ' </ItemAttributes>';     
         echo 
    ' </Item>';    
      }
     } 
     
    echo 
    ' </Items>';
    }
    else 
    {
     echo 
    ' <Request>'
     echo 
    '  <IsValid></IsValid>'
     echo 
    '  <ItemSearchRequest>';
     echo 
    '   <Author></Author>';
     echo 
    '   <Location></Location>';     
     echo 
    '   <Phone></Phone>';     
     echo 
    '  </ItemSearchRequest>'
     echo 
    ' </Request>';
     echo 
    '  <TotalResults></TotalResults>';
     echo 
    '  <TotalPages></TotalPages>';   
      echo 
    ' <Item>'
     echo 
    ' <PARTID></PARTID>';  
     echo 
    ' <DetailPageURL></DetailPageURL>';     
     echo 
    ' <ItemAttributes>';    
     echo 
    '  <line_number></line_number>';    
     echo 
    '  <part_number></part_number>';
     echo 
    '  <description></description>';
     echo 
    '  <shipped_serial></shipped_serial>';    
     echo 
    ' </ItemAttributes>';     
     echo 
    ' </Item>';
     echo 
    ' </Items>';   
     
    }
    ?>
    Attached Images
    Last edited by cluettr; 27 Jul 2007 at 7:57 PM. Reason: Stripped out code that might add confusion and added in the defer methods so the timing would be right.

  5. #5
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);

    hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);


    I wanted to add a something else here about using two grids and populating the second grid based on what is chosen in the first. You may run into a situation where you will get hit with random errors in IE and Firefox when reloading your pages.

    hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);

    I found this to be caused by the datastore being loaded before the grid was actually created. As was mentioned in a few posts... there really is no way to control this other than adding a defer() method as a sort of pause... Here is some info on that issue...

    http://extjs.com/forum/showthread.php?t=10032

  6. #6
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    I like the idea of your thread.

    Here a suggestion:
    Code:
    function displayRMADashboard(listing)
    {
       if (Ext.get('listinggrid'))
       {
          Grid_rma_listing.reconfigure(listing);
       }
       else
       {          
          Grid_rma_listing.init();                                                 
       } 
    }
    You might consider passing the grid id like this, so you do not need to hardcode the id in Grid_rma_listing:
    Code:
    function displayRMADashboard(listing)
    { 
       var gridId = 'listinggrid'; // or pass via the function
       if (Ext.get(gridId))
       {
          Grid_rma_listing.reconfigure(listing);
       }
       else
       {          
          Grid_rma_listing.init(gridId);                                                
       } 
    }
    Btw: This was the reason for this code fragement. The final id was based on the cdrType+cm etc., so one could reuse the entire grid by just passing a different id via init.
    Code:
    // context menu for grid
     var gridContextMenu = new Ext.menu.Menu(cdrType+'-cm');
    Regards

    Wolfgang

  7. #7
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Thank you Wolfgang.

    I did some more research here on my issue... and I'm now at the location that is faster where the problem is still happening. I just defered the building of the grid rather then the datastore and it now works. This makes more sense... if the grid was being built before the datastore was built then you'd have this issue so... I did this...

    Code:
     
    init : function() {
       var checkifgridexists = Grid_rma_details.doesGridExist();
       if (checkifgridexists) { Grid_rma_details.destroy(true); }
       Ext.Element.garbageCollect(); // remove th
       setupDefaultDataSource();
     
       var showGrid = function() { 
       buildGrid();
       };
       showGrid.defer(800);
     
    }
    But a better method would be to defer the rowclick event that creates the datasource for the second grid and to also defer the building of the grid. I did the former at 50ms and the later at 10ms and it worked well... no errors.

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Hey Robert,

    I haven't had a chance to review your code in detail, but I wanted to thank you for taking the time to post this. We really appreciate it when people, even who still may be learning, take the time and interest to contribute back to the community -- it really helps!

    Your application is looking really sharp -- you obviously conquered rest.css Is it going to be publicly available or internal? It would be great if you could add it to the appropriate list once it is finished: http://extjs.com/learn/Manual:Sightings

    On a slightly anal note, you should consider overriding the default CSS for the paging bar and selected row -- the blues kind of jump out of your otherwise gray layout Very nice job on it though!

  9. #9
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Brian, Thanks for the kinds words and advice on the css. This application will unfortunately be behind a firewall and I'd probably have to get some kind of clearance to post more than what I already have. I'll be sure to share as much as I can.

    Again, thanks for the kinds words... very nice to hear.

  10. #10
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    Quote Originally Posted by cluettr View Post
    Thank you Wolfgang.
    ...
    I did some more research here on my issue... and I'm now at the location that is faster where the problem is still happening. I just defered the building of the grid rather then the datastore and it now works. This makes more sense... if the grid was being built before the datastore was built then you'd have this issue so... I did this...
    ...
    Hello Robert,
    i think the approach does not scale reliable. Better would be to subsrcribe to the load event of the datastore.
    Maybe i can add a sample code later on.
    Btw.: i 2nd Brian statement - your app look really impressive.

    Regards

    Wolfgang