ExtJS grid.Panel Resize

Question

I have a grid.Panel inside a panel.Panel with layout: 'card'. How can I make the Grid resize with window resize?

cards = Ext.create('Ext.panel.Panel', {
                  renderTo: 'content',
                  height: 400,
                  activeItem: 0,
                  layout: 'card'
                  items: [{
                    items: [],
                    listeners: {
                      activate: function (tab) {
                        if (tab.items.length == 0) {
                          var baseGridPanelSettings = 
                            {
                             requires: [
                              'Ext.grid.feature.Grouping',
                              'Ext.grid.column.Action'
                             ],
                             height: 400,
                             layout: 'fit',
                             resizable: true
                            }

                          var gr = new Ext.create('Ext.grid.Panel', baseGridPanelSettings);
                          gr.reconfigure(activeDataStore, colsUncontactedLeads);
                          tab.add(gr);
                          tab.doLayout();
                        }

Answer 1

Check this function in the EXtJs docs

onWindowResize( fn, scope, [options] )

Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds), passes new viewport width and height to handlers. Add the below code in the Viewport.js .

Ext.EventManager.onWindowResize(function () {
           this.fireEvent('BROWSER_WINDOW_RESIZE')
        }, this, {buffer: 150});

You have to add an listener to your grid to listen to the event and set your width and height for your Grid.

listeners: {
     BROWSER_WINDOW_RESIZE: this.handleResize,
     scope: this
     }

  handleResize:function(){   
           this.setHeight(Ext.getBody().getViewSize().height - 270);
           this.setWidth(Ext.getBody().getViewSize().width- 100);
         }

Hope it helps you.