Hello! I have a static html table on a page and i would like to transform it to a grid; so i applied this function after loading the table:

function createTable() {

        // create the grid
        var grid = new Ext.ux.grid.TableGrid("tabella-colocazioni", {
            stripeRows: true // stripe alternate rows
        });
        grid.render();
}

I got this piece of code from here: http://www.java2s.com/Code/JavaScript/Ext-JS/CreateagridwithfromanexistingunformattedHTMLtable.htm . The result is the error "this.mainBody is undefined on ext-all-debug.js" on FireBug and the grid is empty. The html code of the table is this:

<table cellspacing="0" id="tabella-colocazioni">
   <thead>
      <tr style="background:#eeeeee;">
         <th>Colocazione</th>
         <th>Frequenza</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>plusquam patria</td>
         <td>1</td>
      </tr>
      <tr>
         <td>patria pietate</td>
         <td>1</td>
      </tr>
      <tr>
         <td>Et patria</td>
         <td>1</td>
      </tr>
      <tr>
         <td>patria prohibet</td>
         <td>1</td>
      </tr>
      <tr>
         <td>Multos patria</td>
         <td>1</td>
      </tr>
      <tr>
         <td>patria reddidit</td>
         <td>1</td>
      </tr>
      <tr>
         <td>patronum patria</td>
         <td>1</td>
      </tr>
      <tr>
         <td>patria moesta</td>
         <td>1</td>
      </tr>
   </tbody>
</table>

What is the problem? Thank you very much.