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

时间:2010-02-08 11:09:39

标签: json datagrid dojo

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

有人这样做过吗?有bug吗?这似乎是任何人都想要的,但也许由于某些原因它是不可能的。有任何想法吗?谢谢!

编辑以插入代码:

<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,它不会分别显示或显示网格。

是什么给出的?

1 个答案:

答案 0 :(得分:3)

是的 - 完全可能。 1)页面布局是布局小部件的责任(ContentPane,StackContainer,BorderContainer,TabContainer ......)网格能够参与布局,但你应该把它放在一个专门用于布局的contianer中。 / p>

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的样式为宽度:100%,高度:100%

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

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