extjs 网格隐藏和显示更改宽度答案

【问题标题】：extjs grid hide and show changes widthextjs 网格隐藏和显示更改宽度
【发布时间】：2014-06-02 02:31:34
【问题描述】：

我在一个 div 中有一个 extjs 网格简单的东西。我通过单击按钮隐藏和显示该容器。隐藏容器后，如果我调整窗口大小，然后再次显示容器，网格的宽度为 100px。我希望它能够利用 width:100%

【问题讨论】：

尝试将hideMode: "offsets" 添加到网格配置或可能包含面板的配置中。 EXT 这个样子很有趣。
我认为只有当我使用 ext 方法隐藏网格时才会起作用？现在我只是通过字面意义上的可见性来隐藏父级：隐藏.. 不知道为什么网格在隐藏时会重新计算它的尺寸
我认为 EXT 会监听窗口大小调整事件，然后对所有内容进行布局。如果发生这种情况时您的网格被隐藏，则它的布局不正确。显示后可以在网格上调用 doLayout() 吗？顺便说一句，我猜在这一点上......
是的 doLayout() 是一个选项，但我的网格嵌套得很深。所以我没有直接处理它。现在如果网格可见并且我调整窗口大小，它可以完美运行

【解决方案1】：

.container{
   border:1px solid gold;
 }
.row{
   padding:20px;
}
.col4{
  width:30%;
  float:left;
  padding:20px;
  font-size:20px;
  background-color:red;
  color:#fff;
  }

 </style>
 <script>
  $(document).ready(function(){
    $(".btn").click(function(){
       $(".container .thrd-row").css("display","none");
});
 $(window).resize(function(){
     $(".container .thrd-row").removeAttr("style");
 });
});


</script>
  //use html
  <div class="container">
    <div class="row firs-row">
        <div class="col4">1</div>
        <div class="col4">1</div>
        <div class="col4">1</div>
    </div>
    <div class="row second-row">
        <div class="col4">1</div>
        <div class="col4">1</div>
        <div class="col4">1</div>
    </div>
    <div class="row thrd-row">
        <div class="col4">1</div>
        <div class="col4">1</div>
        <div class="col4">1</div>
    </div>
    <button class="btn">click hide</button>
</div>

【讨论】：