Dojo：当父控件在默认情况下不可见时，触发子控件在wipein/fadein上调整大小_Dojo

Dojo：当父控件在默认情况下不可见时，触发子控件在wipein/fadein上调整大小

dojo

Dojo：当父控件在默认情况下不可见时，触发子控件在wipein/fadein上调整大小,dojo,Dojo,为了表达我遇到的问题，我将下面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

为了表达我遇到的问题，我将下面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>


dojoConfig={parseOnLoad:true}
#网格{
宽度：500px；
高度：500px；
}
要求（[“dojo/fx”、“dojo/dom”、“dojo/dom样式”、“dojo/on”、“dojo/domReady！”、“dojox/grid/EnhancedGrid”、“dojo/data/ItemFileWriteStore”]，
函数（coreFx、dom、style、on、egrid、ifws）{
/*设置数据存储*/
风险值数据={
标识符：“id”，
项目：[]
};
变量数据列表=[
{col1:“正常”，col2:false，col3:“但后面不跟两个十六进制”，col4:29.91}，
{col1:“重要”，col2:false，col3:'因为%符号总是表示'，col4:9.33}，
{col1:“重要”，col2:false，col3:“符号可以有选择性”，col4:19.34}
];
var行=60；
对于（var i=0，l=data_list.length；i这是一种破解，但您可以尝试
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});

然后，您只需自行调整刮水器的大小：
on(dom.byId("basicWipeButton"), "click", function(){
    style.set("basicWipeNode", "display", "none");
    coreFx.wipeIn({
      node: "basicWipeNode",
      onEnd:function(){
          grid.resize();
      }
    }).play();

但是，这肯定是可行的，如果我有3个网格或其他一些需要调整大小的dojo小部件呢？我使用了dojo.query（“somewidgetselector”，dojo.byId（“basicWipeNode”））为了抓取所有小部件，并为每个小部件获取dijit表示，并在ONED中调用resize if avail..但这似乎很复杂，但并不美观。我希望我是在覆盖一些可用的Dojo API/事件..您可以执行dijit.registry.findWidgets（Dojo.byId（“basicWipeNode”）。forEach（函数（节点）{node.resize（））不幸的是，并不是所有的节点都有调整大小，所以如果节点（& & No.ReSimple）节点ResiZe（），需要在前段内进行检查。你仍然认为这是黑客攻击吗？同样，IE8不支持…FIDEWIGET（节点）。，所以我把它调高了，改用了dojo.forEach（…）。很高兴知道，我的dojo开发人员大部分都在mobile中，所以我很少遇到IE:），而且没有人会认为它是一种黑客行为，因为这似乎是除了在dojo容器中包装wipenode并调用其resizell命令之外的唯一方法