为了让Ext GridPanel在Ext窗口中可以调整大小的Ext Js

我在Ext Window中有Ext GridPanel。为了让Ext Window Resizeable，我使它的属性为真，并且它工作正常。为了让Ext GridPanel在Ext窗口中可以调整大小的Ext Js

但是，也想让网格调整大小。所以，为此我还尝试了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" />'; 
          } 
         } 
        ], 
     .... 
     ....

代码请告诉我需要做什么或我做错什么。

谢谢。

来源

2014-10-01 Naincy

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

来源

2014-10-06 19:48:21

检查该功能在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});

你必须倾听事件和下面的听众设置你的宽度和高度为你grid.Add到您的网格。

listeners: { 
     BROWSER_WINDOW_RESIZE: this.handleResize, 
     scope: this 
     } 

    handleResize:function(){ 
      this.setHeight(Ext.getBody().getViewSize().height - 270); 
      this.setWidth(Ext.getBody().getViewSize().width- 100); 
     }

希望这有助于你...

来源

2014-10-01 09:59:11 Sreek521

谢谢！但是，不想调整窗口大小。想要在ExtJs – Naincy 2014-10-01 10:01:37

http://www.sencha.com/forum/showthread.php?24701-Resizable-GridPanel窗口中调整大小。在Sencha论坛中检查链接一次。 – Sreek521 2014-10-01 10:14:51

为了让Ext GridPanel在Ext窗口中可以调整大小的Ext Js

回答

相关问题