ExtJS 网格在 setHeight 后不会刷新答案

【问题标题】：ExtJS grid won't refresh after setHeightExtJS 网格在 setHeight 后不会刷新
【发布时间】：2016-11-25 10:19:18
【问题描述】：

我用 ExtJS 3.4 制作了一个 GridPanel，高度：200。我有时需要改变高度。

当我 setHeight(65) 使它更短，然后 setHeight 回到原来的高度：200，网格似乎回到了 200 的高度，但里面的内容仍然是我设置高度的样子65 个。我在 setHeight 之后尝试过，但没有运气：

     grid.setHeight(200);
    //myStore.load();
    //myStore.reload();
    //myStore.getStore().load();
    //grid.render();
    //grid.getView().refresh();
    //grid.getView().refresh(true);
    //grid.getView().updateLayout();
    //grid.doLayout();  //just tried not okay

//the code:
   grid = new Ext.grid.GridPanel({
        id: "myGrid",
        store: myStore,
        selModel: mySelectionModel,
        columns: [
            mySelectionModel,
            {
                id: 'name',
                header: "Item",
                width: 240,
                menuDisabled: true,
                dataIndex: 'name'
            }
        ],
        height: 200,
        width: 280,
        listeners: {
            "keydown": function (e) {
                if (e.getKey() == 17) {
                    mySelectionModel.clearSelections();
                }
            }
        }
    });
//another item on top of the gird enlarged code here, so shorter the grid:
grid.setHeight(65)
//the item on top returned to be smaller code here
//so then I return the height of the grid to its original in the line below:
grid.setHeight(200);
//however, after the above line, the content remains as the height of 65

【问题讨论】：

你能加一个简单的小提琴吗？
或者只是添加更多代码？什么是网格？网格还是网格视图？

标签： javascript extjs height refresh

【解决方案1】：

奇怪。我试图简化代码，并且即使在更改高度后也正确设置了网格内容高度。您的父容器使用什么布局？

示例 (https://fiddle.sencha.com/#view/editor&fiddle/1l7c)：

Ext.onReady(function() {    
  var grid = new Ext.grid.GridPanel({    
    title: 'People',    
    renderTo: Ext.getBody(),    
    store: new Ext.data.JsonStore({    
      fields: [ 'id', 'name' ],    
      data: [    
        { id: 1, name: 'Jack' },    
        { id: 2, name: 'Brian' },    
        { id: 3, name: 'John' },    
        { id: 4, name: 'James' },    
        { id: 5, name: 'Anna' },    
        { id: 6, name: 'Dorothy' },    
        { id: 7, name: 'Mike' },    
        { id: 8, name: 'Daisy' },    
        { id: 9, name: 'Brian' },    
        { id: 10, name: 'Brian' }    
      ]    
    }),    
    columns: [    
      { header: "Id", width: 50, menuDisabled: true, dataIndex: 'id' },    
      { header: "Name", width: 150, menuDisabled: true, dataIndex: 'name' }    
    ],    
    height: 200,    
    width: 280    
  });    

  grid.setHeight(60);    
  grid.setHeight(200);    
  grid.setHeight(90);    
  grid.setHeight(150);    
});

【讨论】：

刚刚试过，如果同时设置 height 和 short 它确实会返回同一张表，但在我的代码中，我有放大所有项目的功能和另一个缩短所有项目的功能。并且网格位于 Ext.panel 中，不确定是不是它们的原因，让我尝试简化我的代码并提供更多小提琴。

【解决方案2】：

我终于想通了！感谢您的所有努力。对不起，代码太多，所以我一开始没有详细说。网格位于 Ext.TabPanel 的第 3 个选项卡内，实际上当我想将所有项目恢复正常时，视图将返回到第一个选项卡。我需要做的就是：

myContainer = new Ext.TabPanel({
//other properties of TabPanel
   listeners: {
     "tabchange": function (tabpanel, tab) {
     if (tab.tabid == 3) { //the tab where the grid are
       grid.getView().refresh();
     }
})

【讨论】：

【解决方案3】：

设置新的宽度后试试这个 grid.doLayout();

Try the below fiddle

jsfiddle.net/praveensov/7kpZ9/737 这是设置高度的更新小提琴

【讨论】：

jsfiddle.net/praveensov/7kpZ9/737 这是设置高度的更新小提琴