To make Ext GridPanel resizeable inside ext window in Ext Js

问题

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.

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

回答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

来源：https://stackoverflow.com/questions/26137062/to-make-ext-gridpanel-resizeable-inside-ext-window-in-ext-js

标签

javascript

extjs