1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    agraves is on a distinguished road

      0  

    Question rebuild grid from array

    rebuild grid from array


    Hello all,

    I'm a web developer from Massachusetts. We're building a fairly large-scale application, and we're seriously considering using ExtJS for our ui.

    Unfortunately, I'm having a really tough time getting started. The reference material is very good, but there seems to be very little in the way of explanatory texts.

    In any event, here's the problem that's currently got me scratching my head:

    I'd like to write a function that takes an array of data, such as:

    ["paris","france"],["boston","usa"]

    and updates an existing Ext.grid.GridPanel. I'd like to be able to call this function as many times as I like, whenever I have new data.

    My current solution is roughly this:

    1) create an array
    2) create a reader
    3) create a datastore, passing it some dummy data and the reader

    Everything works up until this point

    Now I want to put new data in my existing grid, so I:

    4) call removeAll() on the datastore
    5) call my reader on the new array
    6) call dataStore.add() on the array of records

    But I get nothing back. What gives?

  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Without seeing your code I'm not too sure what's gone wrong. Here's an example of how to change the data in two ways - using loadData() and add():

    PHP Code:
    <script>
    Ext.namespace('Ext.ExampleData');

    Ext.ExampleData.Cities = [ 
      [
    "paris","france"],
      [
    "boston","usa"]
    ];

    Ext.ExampleData.Pubs = [   
      [
    'The Cottage Bar''Letterkenny'],
      [
    'The Cottage Bar''Teaneck NJ']
    ];

    var 
    Example = function(){

      var 
    DataRecord Ext.data.Record.create([
        {
    name'field1'type'string'},
        {
    name'field2'type'string'}
      ]);

      var 
    dscmgrid;
      
      return{
        
    init : function(){        

          
    ds = new Ext.data.Store({
            
    proxy: new Ext.data.MemoryProxy(Ext.ExampleData.Cities),
            
    //reader: new Ext.data.ArrayReader({}, [{name: 'field1'},{name: 'field2'}])
            
    reader: new Ext.data.ArrayReader({}, DataRecord)   
          });
            
          
    cm = new Ext.grid.ColumnModel([
            {
    header"City"width200sortabletruelocked:falsedataIndex'field1'},
            {
    header"Country"width200sortabletruedataIndex'field2'}
          ]);
        
          
    grid = new Ext.grid.Grid('grid-data'
            {
    dsdscmcmsm: new Ext.grid.RowSelectionModel({singleSelect:true})}
          );
            
          var 
    layout Ext.BorderLayout.create(
            {
    center: {margins:{left:3,top:3,right:3,bottom:3},panels: [new Ext.GridPanel(grid)]}}, 
            
    'grid-panel'
          
    );
            
          
    grid.render();
          
    ds.load();
        },
        
        
    changeData: function(dataIndex){
          switch (
    dataIndex){
            case 
    0:
              
    cm.setColumnHeader(0'City');
              
    cm.setColumnHeader(1'Country');
              
              
    ds.loadData(Ext.ExampleData.Cities);
              break;
              
            case 
    1:
              
    cm.setColumnHeader(0'Pub');
              
    cm.setColumnHeader(1'Town');

              
    ds.loadData(Ext.ExampleData.Pubs);
              break;
              
            case 
    2:
              var 
    newRecords = new Array();
              
              
    cm.setColumnHeader(0'Song');
              
    cm.setColumnHeader(1'Band');

              
    newRecords[0] = new DataRecord({field1'This is Punkarama'field2'Venus and the Razorblades'});
              
    newRecords[1] = new DataRecord({field1'Yes Sir I Will'field2'Crass'});
              
              
    ds.removeAll();
              
    ds.add(newRecords);
              
              
    delete newRecords;
              break;
          }
        }    
      }
    }();
    Ext.onReady(Example.initExample);
    </script>
    </head>

    <body>
    <a href="javascript:Example.changeData(0);">Cities</a>&nbsp;|&nbsp;<a href="javascript:Example.changeData(1);">Pubs</a>&nbsp;|&nbsp;<a href="javascript:Example.changeData(2);">Dodgy Punk Songs</a>
    <div id="grid-panel" style="width:600px;height:300px;">
    <div id="grid-data"></div>
    </div>
    </body>
    </html> 

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    agraves is on a distinguished road

      0  

    Default


    Cool, that's helpful...got it working now, thanks.

Thread Participants: 1