在以编程方式定义时,dojo datagrid autoheight无法正常工作

时间:2016-01-26 22:08:18

标签: dojo dojox.grid.datagrid

以下代码构建3个datagrids,2个通过标记,1个通过代码。

当您按下" autoheight!"按钮只有标记datagrids调整大小。

我不明白为什么代码数据网格不起作用。据我所见,正在初始化相同的属性。

由于

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes    /claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css"> 
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://js.arcgis.com/3.13/"></script>  
<script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>     
<meta charset="UTF-8">
<title>alubia</title>

<script type="text/javascript"> 
    var test_store;

    var layout = [
        {name:"id", field:"id", width: '165px', noresize: 'true'},
        {name:"data", field:"data", width: '125px', noresize: 'true'}           
    ];

    function loadData(gridId, divId) {                                      
    require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {           
        var mi_data = { 
            items : [],
            identifier:"id"
        };                                  

        for (var i = 0; i < 22; i++) {
            mi_data.items.push({id: ""+i, data:"111 ! "+ i});           
        }       

        test_store  = new ItemFileWriteStore({data: mi_data});          

        if (divId != null) {        
            var grid = new DataGrid({
                id : gridId,
                store : test_store,
                structure : layout,
                rowSelector : '0px',
                autoHeight : false                  
            });

            grid.placeAt(divId);    
            grid.startup();
        }
    });         
    }   

    function fitHeight(gridId) {        
        var grid = dijit.byId(gridId);          
        grid.set('autoHeight', true);
        grid.set('autoWidth', false);
        grid.update();          
    }           

    loadData("grid", null);
    loadData("grid2", "grid2Div");
    loadData("grid3", null);
</script>
</head>

<body class="claro" style="font-family:sans-serif; font-size:12px;">
<button onclick="fitHeight('grid'); fitHeight('grid2'); fitHeight('grid3');">autoheight!</button>&nbsp;           

<div id="grid2Div" style="height: 7em;" ></div>
<div id="grid" style="height: 7em;"  data-dojo-id="grid" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>    
<div id="grid3" style="height: 7em;"  data-dojo-id="grid3" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
</body>
</html>

1 个答案:

答案 0 :(得分:-1)

再一次,道场是一个可怕的工具。转到datatables(jquery插件)。太阳再次闪耀。