可調整TreePanel中的ExtJS的

Question

我有一個TreePanel中：

treepanel = Ext.define('filteredTree', { 
         extend: 'Ext.tree.Panel', 
         title: 'Filtered Tree', 
         store: store, 
         width: 784, 
         height: 550, 
         buttons: [ 
         { 
          text: 'Select', 
          handler: function() { 
           var panel = this.up('treepanel'); 
           //...selection of value 
          } 
         } 
        ] 
    //...Here is search mechanism 

    }); 

並在它的顯示窗口。窗口是可調整大小：

 win = Ext.create('widget.window', { 
      title: 'Выбор значения из словаря', 
      header: { 
       titlePosition: 2, 
       titleAlign: 'center' 
      }, 
      closable: true, 
      closeAction: 'hide', 
      maximizable: true, 
      width: 800, 
      minWidth: 350, 
      height: 600, 
      tools: [{ type: 'pin' }], 
      theme:"classic", 
      layout: { 
       type: 'border', 
       padding: 5 
      }, 
      items: [ 
       Ext.create('filteredTree') 
      ] 
     }); 

我想看看如果窗口大小改變了面板也改變大小。我怎樣才能做到這一點？

Answer 1

將窗口的佈局更改爲fit。

面板將佔據窗口內的完整空間並相應調整大小。您可以從樹面板中移除高度和寬度。

Ext.create('Ext.window.Window', { 
      title: 'Выбор значения из словаря', 
      header: { 
       titlePosition: 2, 
       titleAlign: 'center' 
      }, 
      closable: true, 
      closeAction: 'hide', 
      maximizable: true, 
      width: 600, 
      minWidth: 350, 
      height: 400, 

      layout:'fit', 
      items: [ 
       {xtype:'treepanel', 
       padding:5, 
         title: 'Filtered Tree',     
         buttons: [ 
         { 
          text: 'Select', 
          handler: function() { 
           var panel = this.up('treepanel'); 

          } 
         } 
        ]} 
      ] 
     }).show();