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

Question

我在Ext窗口中有Ext GridPanel。 为了使Ext Window可调整大小，我将其属性设置为true并正常工作。

但是，还希望使网格可调整大小。 因此，为此我也尝试了resizeable: true 。

没运气！

在这里，我的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" />';
                            }
                        }
                    ],
         ....
         ....

请告诉我我需要做什么，或者我做错了什么。

谢谢。

Answer 1

在EXtJs文档中检查此功能

onWindowResize( fn, scope, [options] )

添加一个侦听器，以便在调整浏览器窗口大小时得到通知，并提供调整大小事件缓冲（100毫秒），将新的视口宽度和高度传递给处理程序。

示例代码如下所示（您必须添加此事件，然后将其触发。）将事件添加到init组件中如下所示（在下面，这是指网格范围）

this.addEvents('BROWSER_WINDOW_RESIZE');

在afterRender中触发事件如下所示

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

您必须侦听事件并设置网格的宽度和高度。将以下侦听器添加到网格中。

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

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

希望这对您有帮助...

Answer 2

ExtJs具有不同的布局，您可以根据需要使用它们。 从上面的代码中，您似乎没有为网格面板使用任何布局。

请参考此http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html并尝试一些不同的布局组合。

首先尝试使用layout: auto作为父网格。 之后，您可以为子面板使用不同的布局。 对于网格面板，您可以尝试

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