使Ext JS中的ext窗口内的Ext GridPanel可调整大小

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.

Answer 1

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...

Answer 2

ExtJs has different layouts that you can use according to your requirement. From your above code, it looks like you are not using any layout for your Grid Panel.

Please refer this http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html and try with some different layout combinations.

Firstly try with layout: auto for your parent grid. After that you can use different layouts for child panels. For your grid panel, you can try with

layout: auto,
height: 'auto',
autoHeight: true, 
region : north, // you can try center as well