既存のTableをGridにする手順

HTML中の既存テーブルをGridにする手順は以下のようにします。
HTML中にテーブルを作成します。
このとき<thead>と<tbody>を定義します。

次に以下のようにExtJsのソースを記述します。
Example = function(){
return {
init : function(){
var grid = new Ext.grid.TableGrid("the-table");

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
grid.render();
}
};
}();

Ext.grid.TableGrid = function(table, config) {
config = config || {};
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table);

var ct = table.insertSibling();

var fields = [], cols = [];
var headers = table.query("thead th");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i;

fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'
}));

cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true
}));
}

var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)
});

ds.loadData(table.dom);

var cm = new Ext.grid.ColumnModel(cols);

if(config.width || config.height){
ct.setSize(config.width || 'auto', config.height || 'auto');
}
if(config.remove !== false){
table.remove();
}

Ext.grid.TableGrid.superclass.constructor.call(this, ct,
Ext.applyIf(config, {
'ds': ds,
'cm': cm,
'sm': new Ext.grid.RowSelectionModel(),
autoHeight:true,
autoWidth:true
}
));
};

Ext.extend(Ext.grid.TableGrid, Ext.grid.EditorGrid);

Ext.EventManager.onDocumentReady(Example.init, Example, true);

以上で既存のテーブルがGridとして表示されます。