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

To make Ext GridPanel resizeable inside ext window in Ext Js

本文关键字：Ext 可调整 窗口 中的 GridPanel Js      更新时间：2023-09-26

我在Ext Window中有Ext GridPanel。为了使Ext Window可调整大小，我使其属性为真，并且运行良好。

但是，也要使网格可调整大小。因此，我也尝试了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" />';
                            }
                        }
                    ],
         ....
         ....

请告诉我需要做什么，否则我做错了什么。

谢谢。

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

希望这能帮助你。。。

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
相关文章：