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> | <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>