在xpages中使用dojox网格

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoTheme="true" 
  dojoParseOnLoad="true" >
<link rel="stylesheet" type="text/css"
  href="../dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"
  href="../dojox/grid/_grid/tundraGrid.css" />

  <xp:this.resources>
   <xp:dojoModule name="dojox.grid.DataGrid"></xp:dojoModule>
   <xp:dojoModule name="dojox.grid"></xp:dojoModule>
  </xp:this.resources>

  <xp:panel >  
      <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[makeGrid = function(){
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
var subrow1 = [{name: "Product Title"}, {name: "Price"}, {name: "Type"}];
var view = {rows: [ subrow1 ]};
var structure = [ view ];
var data = [
["Baseball gloves", 12.34, "Sports"],
["Tennis ball", 5.99, "Sports"],
["T-shirt", 12.45, "Clothing"],
["Hat", 12.45, "Clothing"]
];
var productModel = new dojox.grid.data.Table(null, data);
productModel.render(); 

};
XSP.addBeforeLoad(makeGrid);]]>
      </xp:this.value>
    </xp:scriptBlock>

    <div dojoType="dojox.Grid" autoWidth="true" model="productModel"
structure="structure"></div>

  </xp:panel> 
</xp:view>