rendering a grid from a table: "this.mainBody is undefined"

Question

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.

Answer 1

Code looks fine. Are you sure that all includes are correct (check the Firebug Net tab)? Are you sure that the Ext version you are using is supported by the ux?