爲了讓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

回答

相關問題