Question

我正在尝试动态创建DataGrid。声明式创建工作正常：

数据来源：

<span dojoType="dojo.data.ItemFileReadStore" 
    jsId="theStore" url="dataonly001.json">
  </span>

一个简单的布局：

<script type="text/javascript" >    
  var layout = [ {
            field: 'custId',
            name: 'Id',                   
        } // more items elided ...
     ]; 
</script>

网格：

<body class="tundra" id="mainbody"> 
   <div id="grid"
     dojoType="dojox.grid.DataGrid"
     store="theStore"
     structure="layout"  
     autoWidth="true"     
 ></div>   
</body>

我得到了很好的网格显示。相反，我想动态创建网格。为了弄清楚什么是破碎我尝试使用完全相同的布局和存储，只删除网格声明并添加此脚本：

  <script type="text/javascript" djConfig="parseOnLoad: true, debugAtAllCosts: true">

  dojo.addOnLoad(function(){
        // initialise and lay out home page
        console.log("Have a store:" + theStore);
        console.log("Have a structure:" + layout);

        var grid = new dojox.grid.DataGrid({
                id : "grid",
                store : theStore,
                clientSort : "true",
                structure : layout
        });
        grid.startup();

    dojo.place(grid.domNode, dojo.body(), "first");                     
  });

 </script>

我得到的效果是显示一个完全空的矩形。使用FireBug我可以看到DataGrid小部件已创建，但它没有行或列。所以我的猜测是数据存储区或布局没有正确传递。但是，似乎在创建时theStore和layout的值是正确的。

请提出建议，或者确实是程序化网格的工作示例可以解决问题。

Answer 1

首先将网格附加到DOM并创建窗口小部件实例。

所以简单而不是

grid.startup();
dojo.place(grid.domNode, dojo.body(), "first");

写

dojo.place(grid.domNode, dojo.body(), "first");  
grid.startup();

您甚至可以在构造函数中设置每个Dojo小部件的容器节点。

var grid = new dojox.grid.DataGrid({
    ⋮                     
}, dojo.byId('grid_container'));
grid.startup();

Dojo DataGrid，程序化创建

1 个答案: