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();

在哪里

MyFirstColumnHeader 是您希望在第一列标题中显示的文本

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

gridPlaceholder 是页面上的一个 div 用于放置网格（只需在 ContentPane 中添加一个空 div 并将 ContentPane 的样式设置为 width : 100%, height : 100%

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

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