ExtJS сетка не обновится после setHeight

Question

Я сделал GridPanel от ExtJS 3.4, высота: 200. Иногда мне нужно менять высоту.

Когда я устанавливаюHight (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

Попробуйте это после установки новой ширины grid.doLayout();

Try the below fiddle 

jsfiddle.net/praveensov/7kpZ9/737 это обновляется скрипку с настройкой высоты

Answer 2

Strange. Я попытался упростить код, и высота содержимого сетки правильно установлена ​​даже после изменения высоты. Каким макетом является ваш родительский контейнер?

Пример (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 3

я, наконец, понял, как это сделать! Спасибо за все ваши усилия. Извините, поскольку коды слишком много, поэтому я не сказал этого подробно в самом начале. Оправа находится внутри третьей вкладки Ext.TabPanel, и на самом деле, когда я хочу восстановить все элементы в нормальном режиме, представление вернется на 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(); 
    } 
})