rebuild grid from array [Archive]

agraves

4 Oct 2007, 12:58 PM

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?

fay

5 Oct 2007, 4:03 AM

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():

<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> | <a href="javascript:Example.changeData(1);">Pubs</a> | <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>

agraves

16 Oct 2007, 6:07 AM

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