處理的佈局動態地

下面是我嘗試的代碼：處理的佈局動態地

<script type="text/javascript"> 
    Ext.require(['*']); 
    Ext.onReady(function() { 
     Ext.Loader.setConfig({ 
      enabled: true 
     }); 
     var totalScreenWidth = screen.availWidth; 
     var totalScreenHeight = screen.availHeight; 
     Ext.QuickTips.init(); 

     var viewport = Ext.create('Ext.ViewPort', { 
      id: 'border-example', 
      layout: 'border', 
      items: [ 
      Ext.create('Ext.Component', { 
       region: 'north', 
       height: totalScreenHeight * 0.05, 
       autoEl: { 
        tag: 'div', 
        html: '<p><center>UI Demo</center></p>' 
       } 
      }), { 
       region: 'west', 
       stateId: 'navigation-panel', 
       id: 'west-panel', 
       title: 'Tree View', 
       split: true, 
       width: totalScreenWidth * 0.2, 
       collapsible: true, 
       animCollapse: true, 
       xtype: 'tabpanel', 
       dockedItems: [{ 
        dock: 'top', 
        xtype: 'toolbar' 
       }], 
       minSize: 175, 
       maxSize: 400, 
       margin: '0 5 0 0', 
       activeTab: 1, 
       tabPosition: 'bottom', 
       items: [{ 
        title: 'Tree View', 
        autoScroll: true 
       }, { 
        title: 'Graphical View', 
        autoScroll: true 
       }] 

      }, 
      Ext.widget('tabpanel', { 
       id: 'tabWidgetPanel', 
       region: 'center', 
       items: [{ 
        contentEl: 'Tabs1', 
        title: 'Tab1', 
       }, { 
        contentEl: 'Tabs2', 
        title: 'Tab2', 
       }] 
      })] 
     }); 

     ext.get("hideit").on('click', function() { 
      var w = Ext.getCmp('west-panel'); 
      w: collapsed ? w.expand() : w.collapse(); 
     }); 

    }); 
</script>

當西導航面板被最小化，那麼tabWidgetPanel也正在向左離開空屏幕的右側。

我想要的是當西方導航面板摺疊時，我希望tabWidgetPanel的大小增加並佔據整個屏幕。

來源

2012-09-22 user182944

從中刪除renderTo，添加區域：'center'，刪除高度並移除寬度。定義此區域時，該區域無法調整。你也正在寫reion：'west'。

來源

2012-09-22 06:32:16 sra

我按照你的建議編輯了上面的代碼，當我在使用firebug在mozilla中運行它時出現異常：「c不是構造函數：第21行」請告知上述代碼中的錯誤。問候， – user182944

我在這個時刻移動，因此我無法測試。但是你應該在開發的時候使用ext-all-debug.js！它會給出更好的錯誤信息......我的猜測是，在不使用contentEl的情況下定義具體的選項卡。 – sra

@ user182944而不要使用Ext.Component，而是使用Ext.container.Container！我建議你在這裏只使用xtype！ – sra

處理的佈局動態地

回答

相關問題