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

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

.container{
.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>

边框：1件纯金；
}
.行{
填充：20px；
}
.col4{
宽度：30%；
浮动：左；
填充：20px；
字体大小：20px；
背景色：红色；
颜色：#fff；
}
$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
$（“.container.thrd行”）.css（“显示”、“无”）；
});
$（窗口）。调整大小（函数（）{
$（“.container.thrd行”）.removeAttr（“样式”）；
});
});
//使用html
1.
1.
1.
1.
1.
1.
1.
1.
1.
单击“隐藏”

尝试将

隐藏模式：“偏移量”

添加到网格配置或可能包含面板的配置中。EXT的这种方式很有趣。我想只有用EXT方法隐藏网格，这才有效？现在，我只是通过使可视性：隐藏来隐藏家长。。不知道为什么网格在隐藏时会重新计算它的尺寸。我想EXT会监听窗口大小调整事件，然后对所有内容进行布局。如果发生这种情况时网格被隐藏，则它的布局不正确。在显示doLayout（）后，可以在网格上调用它吗？我猜在这一点上顺便说一句…是的doLayout（）是一个选项，但我的网格嵌套得很深。所以我不能直接处理它。现在，若网格是可见的，并且我调整了窗口的大小，它就可以完美地工作