Question

我用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

Answer 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);    
});

Answer 2

我终于弄明白该怎么做了！谢谢你的所有努力。很抱歉，因为代码太多了，所以我从一开始就没有详细说明。 gird位于Ext.TabPanel的第3个选项卡内，实际上当我想将所有项恢复到正常状态时，视图将返回到第1个选项卡。我需要做的就是：

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();
     }
})

Answer 3

设置新宽度后尝试此操作的 grid.doLayout（）;

Try the below fiddle

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

在setHeight之后，ExtJS网格不会刷新

3 个答案: