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

Question

我在 Ext 窗口中有 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 毫秒)，将新的视口(viewport)宽度和高度传递给处理程序。

示例代码如下所示(您必须添加此事件然后触发它。)在 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);
         }

希望这对你有帮助...