0

私が直面していることを伝えるために、以下の HTML に Dojo の例をまとめました。問題は、ページの読み込み時に親が表示されない場合、テーブルがレンダリングされないことです。親が表示されたときに子テーブルのサイズを変更するにはどうすればよいですか?

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script>dojoConfig = {parseOnLoad: true}</script>
<style>
#grid {
    width: 500px;
    height: 500px;
}
</style>
<script>
require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!","dojox/grid/EnhancedGrid","dojo/data/ItemFileWriteStore"],
function(coreFx, dom, style, on,egrid,ifws){
    /*set up data store*/
    var data = {
      identifier: 'id',
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 60;
    for(var i=0, l=data_list.length; i<rows; i++){
      data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up layout*/
    var layout = [[
      {'name': 'Column 1', 'field': 'id'},
      {'name': 'Column 2', 'field': 'col2'},
      {'name': 'Column 3', 'field': 'col3', 'width': '230px'},
      {'name': 'Column 4', 'field': 'col4', 'width': '230px'}
    ]];

    /*create a new grid:*/
    var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px'},
      document.createElement('div'));

    /*append the new grid to the div*/
    dojo.byId("gridDiv").appendChild(grid.domNode);

    /*Call startup() to render the grid*/
    grid.startup();

 on(dom.byId("basicWipeButton"), "click", function(){
    style.set("basicWipeNode", "display", "none");
    coreFx.wipeIn({
      node: "basicWipeNode"
    }).play();
  });
});
</script>
</head>
<body class="claro">
<button type="button" id="basicWipeButton">Wipe It In!</button>
<div id="basicWipeNode" style=" background-color: #EEE; display: none;">
  <p><b>This is a container of random content to wipe in!</b></p>
  <div id="gridDiv"></div>
</div> 
</body>
</html>
4

1 に答える 1

0

そのハックですが、試すことができます

on(dom.byId("basicWipeButton"), "click", function(){
    style.set("basicWipeNode", "display", "none");
    coreFx.wipeIn({
      node: "basicWipeNode",
      onEnd:function(){
          grid.domNode.style.height="500px";
          grid.resize();
      }
    }).play();

アップデート：：

これははるかにクリーンな方法です。グリッドの作成時に属性 autoHeight:true を設定します::

var grid = new dojox.grid.EnhancedGrid({
        id: 'grid',
        store: store,
        structure: layout,
        rowSelector: '20px',
        autoHeight:true});

次に、wipeIn の onEnd で、自分でサイズ変更を行います。

on(dom.byId("basicWipeButton"), "click", function(){
    style.set("basicWipeNode", "display", "none");
    coreFx.wipeIn({
      node: "basicWipeNode",
      onEnd:function(){
          grid.resize();
      }
    }).play();
于 2013-10-02T19:42:38.173 に答える