dojo.data.ItemFileReadStore + dojox.grid.DataGrid + 100％宽度和高度

Question

我想要一个以dojo.data.ItemFileReadStore作为数据存储的dojox.grid.DataGrid。我希望它充满整个屏幕。我不想以像素为单位指定尺寸。我看过的所有示例均以像素为单位指定它们，或使用CSV数据存储。我尝试使用HTML元素和javascript设置数据网格并存储。

有人这样做吗？有错误吗？似乎有人想要什么，但也许出于某些原因这是不可能的。有任何想法吗？谢谢！

编辑以插入代码：

<div id="gridContainer" style="width: 100%; height: 100%;"></div>

<div id="gridContainer1" style="width: 400px; height: 200px;"></div>


<script type="text/javascript">

    dojo.addOnLoad(function(){
        // our test data store for this example:
        var jsonStore = new dojo.data.ItemFileReadStore({
            url: '/mydata.json'
        });

        var layout = [{
            field: 'id',
            name: 'id',
            width: '20px'
        },
        {
            field: 'name',
            name: 'name',
            width: '50px'
        },
        {
            field: 'owner',
            name: 'owner',
            width: '50px'
        }];

        // create a new grid:
        var grid = new dojox.grid.DataGrid({
            query: {
            rowid: '*'
            },
            store: jsonStore,
            clientSort: true,
            rowSelector: '20px',
            structure: layout
        },
        document.createElement('div'));

        dojo.byId("gridContainer1").appendChild(grid.domNode);

        grid.startup();
    });
</script>

取决于我是否使用gridContainer或gridContainer1，它分别不显示或不显示网格。

什么给了？

Answer 1

是的-完全有可能。1）页面布局是布局小部件（ContentPane，StackContainer，BorderContainer，TabContainer ...）的职责。网格能够参与布局，但是您实际上应该将其放置在旨在进行布局的容器中。] >

2）可以通过以下方式来实现程序化创建：

var layout = [{
    name: "MyFirstColumnHeader",
    field: 'someColumnNameInMyData',
    width: "180px;"
  },
  {
    name: "MySecondColumnHeader",
    field: 'someOtherColumnName',
    width: "180px;"
  }
];

var emptyData = {
  identifier: 'uniqueIdOfEachItem',
  label: 'displayName',
  items: []
};
var store = new dojo.data.ItemFileWriteStore({
  data: emptyData
});
var grid = new dojox.grid.DataGrid({
  id: 'myGrid',
  query: {
    uniqueIdOfEachItem: '*'
  },
  store: store,
  structure: layout
}, gridPlaceholder);
grid.startup();
where

MyFirstColumnHeader是您想要的第一列标题中的文本

someColumnInMyData是要显示的数据中的对象属性或“列”

gridPlaceholder是页面上要放入网格的div（只需将一个空div添加到ContentPane并将ContentPane的样式设置为width：100％，height：100％

uniqueIdOfEachItem是每个显示的项目的属性，这些属性将其标记为唯一，例如其主键或ID属性

此示例创建一个读/写存储并且具有简单的布局，但是dojo文档应该能够为更复杂的示例提供帮助。