ExtJS grid.Panel 调整大小答案

【问题标题】：ExtJS grid.Panel ResizeExtJS grid.Panel 调整大小
【发布时间】：2014-08-26 04:43:57
【问题描述】：

我在 panel.Panel 中有一个 grid.Panel，布局为：'card'。如何通过窗口调整大小来调整网格大小？

cards = Ext.create('Ext.panel.Panel', {
                  renderTo: 'content',
                  height: 400,
                  activeItem: 0,
                  layout: 'card'
                  items: [{
                    items: [],
                    listeners: {
                      activate: function (tab) {
                        if (tab.items.length == 0) {
                          var baseGridPanelSettings = 
                            {
                             requires: [
                              'Ext.grid.feature.Grouping',
                              'Ext.grid.column.Action'
                             ],
                             height: 400,
                             layout: 'fit',
                             resizable: true
                            }

                          var gr = new Ext.create('Ext.grid.Panel', baseGridPanelSettings);
                          gr.reconfigure(activeDataStore, colsUncontactedLeads);
                          tab.add(gr);
                          tab.doLayout();
                        }

【问题讨论】：

标签： extjs layout panel autoresize

【解决方案1】：

在 EXtJs 文档中检查这个函数

onWindowResize( fn, scope, [options] )

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

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);
         }

希望对你有帮助。

【讨论】：