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

Question

我在 Ext Window 中有 Ext GridPanel。为了使 Ext Window Resizeable，我将它的属性设为 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