Results 1 to 3 of 3

Thread: rebuild grid from array

  1. 4 Oct 2007, 12:58 PM #1
    agraves
    agraves is offline
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
      0  

    Question 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?
    Reply With Quote Reply With Quote
  2. 5 Oct 2007, 4:03 AM #2
    fay
    fay is offline
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
      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     ds, cm, grid;
      
      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", width: 200, sortable: true, locked:false, dataIndex: 'field1'},
            {    header: "Country", width: 200, sortable: true, dataIndex: 'field2'}
          ]);
        
              grid = new Ext.grid.Grid('grid-data', 
            {    ds: ds, cm: cm, sm: 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.init, Example);
    </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> 
    Reply With Quote Reply With Quote
  3. 16 Oct 2007, 6:07 AM #3
    agraves
    agraves is offline
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Cool, that's helpful...got it working now, thanks.
    Reply With Quote Reply With Quote
« Grid with a preview panel... shall I use another Datastore? | ComboBox from Objects instead of array »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules