To make Ext GridPanel resizeable inside ext window in Ext Js

Question

I have Ext GridPanel inside Ext Window. For making Ext Window Resizeable, I made its property true and it worked fine.

But, also want to make grid resizeable. So, for that also I tried with resizeable: true.

No Luck!

Here, my code for GridPanel

new Ext.grid.GridPanel({
   height: 295,
   id: 'productGrid',
   store: productStore,
   disableSelection: true,
   loadMask: true,
   stripeRows: true,
   region: 'south',
   resizeable: true, // not working
   autoExpandColumn: 'auto-expand',
   cm: new Ext.grid.ColumnModel({
          id: 'productColModel',
                columns: [
                {
                     header: "column1",
                     dataIndex: 'name',
                     width: 110
                }, {
                     header: "column2",
                     dataIndex: "age",
                     sortable: false,
                     align: 'left',
                     width: 80
                }, {
                      id: 'auto-expand',
                      header: "Description",
                      dataIndex: 'description',
                      renderer: function(value, metaData, record) {
                      return Ext.util.Format.stripTags(value);
                    }
                }, {
                       header: "Weight",
                       dataIndex: 'weight',
                       align: 'right',
                       width: 70
                }, {
                       header: "List Price",
                       dataIndex: 'listPrice',
                       align: 'right',
                       renderer: 'usMoney',
                       width: 80
                }, {
                       header: "Add",
                       width: 30,
                       dataIndex: 'id',
                       sortable: false,
                       renderer: function(value) {
                       return '<img class="columnHover" src="/scripts/shared/icons/fam/add.gif" height="16" width="16" />';
                            }
                        }
                    ],
         ....
         ....

Please, tell what I need to do or I am doing anything wrong.

Thanks.

Sreek521 Sreek521 · Accepted Answer · 2014-10-01T09:59:11

Check this function in the EXtJs docs

onWindowResize( fn, scope, [options] )

Add a listener to be notified when the browser window is resized and provide resize event buffering (100 milliseconds), passes new viewport width and height to handlers.

Example code looks like the below(You have to add this event and then fire it.) Adding the event in the init component looks like below(in the below this refers to grid scope)

this.addEvents('BROWSER_WINDOW_RESIZE');

Firing the event in the afterRender looks like below

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

You have to listen the event and set your width and height for your grid.Add the below listener to 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 this helps you...

To make Ext GridPanel resizeable inside ext window in Ext Js

2 Answers