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有不同的布局，您可以根据自己的要求使用。从上面的代码看，您看起来没有使用Grid Panel的任何布局。

请参阅此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

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

2 个答案: