how to move dojo datagrid after a hidden control is shown

时间：2016-04-21 22:09:56

标签： javascript dojo

1 - a simple form that contains a select (let's call it select1) and a dojo datagrid below it.

2 - when you change the value of select1 it toggles the visibility of another select, let's call it select2, located between select1 and datagrid1

3 - when select2 appears, datagrid1 doesn't move to make room for it. I need that to happen

PLEASE NOTE: due to something with arcgis.com, sometimes the snippet does not run at first click.

Thank you

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
  <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/Grid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <style type="text/css">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    ,
  </style>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>


  <script src="http://js.arcgis.com/3.13/"></script>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    }

    require(
      [
        "dojo/parser",
        'dijit/layout/BorderContainer',
        "dojo/domReady!"
      ],
      function(parser, BorderContainer) {
        parser.parse();
        var layout = [{
          name: "f1",
          field: "f1",
          width: '165px',
          noresize: 'true'
        }, {
          name: "f2",
          field: "f2",
          width: '125px',
          noresize: 'true'
        }, {
          name: "id",
          field: "id",
          width: '40px',
          noresize: 'true'
        }, ];
        initGrid(layout, "_myGrid", "myGrid", "id");
      });

    function initGrid(layout, gridId, divId, itemId) {
      require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
        var grid = new DataGrid({
          id: gridId,
          store: new ItemFileWriteStore({
            data: {
              items: []
            }
          }),
          structure: layout,
          rowSelector: '0px'
        });

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

    function changeSelect() {
      if (document.getElementById("secondaryTable").style.display == 'none') {
        document.getElementById("secondaryTable").style.display = "block";
      } else {
        document.getElementById("secondaryTable").style.display = "none";
      }
    }
  </script>
</head>

<body class="claro" style="font-family: Verdana; font-size: 11px;">
  <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
      <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
          <table>
            <tr>
              <td>
                <select onchange="changeSelect()">
                  <option value="op1" selected="selected">op1</option>
                  <option value="op2">op2</option>
                </select>
              </td>
            </tr>
          </table>

          <div>
            <table id="secondaryTable" style="display:none;">
              <tr>
                <td>xxxx</td>
                <td>
                  <select></select>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
          <div id="myGrid" style="height:76%;"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

更改内容高度后，您需要resize BorderContainer。 所以你需要拨打borderContainer.resize();

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
  <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/Grid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <style type="text/css">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    ,
  </style>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>


  <script src="http://js.arcgis.com/3.13/"></script>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    }

    require(
      [
        "dojo/parser",
        'dijit/layout/BorderContainer',
        "dojo/domReady!"
      ],
      function(parser, BorderContainer) {
        parser.parse();
        var layout = [{
          name: "f1",
          field: "f1",
          width: '165px',
          noresize: 'true'
        }, {
          name: "f2",
          field: "f2",
          width: '125px',
          noresize: 'true'
        }, {
          name: "id",
          field: "id",
          width: '40px',
          noresize: 'true'
        }, ];
        initGrid(layout, "_myGrid", "myGrid", "id");
      });

    function initGrid(layout, gridId, divId, itemId) {
      require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
        var grid = new DataGrid({
          id: gridId,
          store: new ItemFileWriteStore({
            data: {
              items: []
            }
          }),
          structure: layout,
          rowSelector: '0px'
        });

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

    function changeSelect() {
      if (document.getElementById("secondaryTable").style.display == 'none') {
        document.getElementById("secondaryTable").style.display = "block";
      } else {
        document.getElementById("secondaryTable").style.display = "none";
      }
      borderContainer.resize();
    }
  </script>
</head>

<body class="claro" style="font-family: Verdana; font-size: 11px;">
  <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
      <div data-dojo-id="borderContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
          <table>
            <tr>
              <td>
                <select onchange="changeSelect()">
                  <option value="op1" selected="selected">op1</option>
                  <option value="op2">op2</option>
                </select>
              </td>
            </tr>
          </table>

          <div>
            <table id="secondaryTable" style="display:none;">
              <tr>
                <td>xxxx</td>
                <td>
                  <select></select>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
          <div id="myGrid" style="height:76%;"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题