根據窗口大小動態地排列對象ExtJs

Question

我的表單由兩個子面板組成。我想安排他們如下：

1）如果瀏覽器的窗口更寬一些限制，那麼面板應水平排列，並排（例如使用HBox佈局）。

2）如果瀏覽器的窗口很窄，則面板應垂直排列。每個面板都應該適合窗戶的寬度。

當用戶更改窗口大小時，面板將根據當前窗口寬度進行重新排列。

這是如何在ExtJs4中實現的？

Answer 1

要動態完成此操作，您必須刪除子項，然後使用不同的佈局再次創建子項。但是，這並非總是可行的。我建議「手動」設置位置和大小。這裏正在樣品http://jsfiddle.net/Le4H7/2/只是移動分段

var switchWidth = 400; 

Ext.onReady(function(){ 
    Ext.create('Ext.container.Container',{ 
     id: 'mainContainer', 
     title: 'Main panel', 
     renderTo: Ext.getBody(), 
     padding: 5, 
     layout: 'absolute', 
     items: [{ 
      xtype:'panel', 
      title: 'First panel', 
      id: 'firstPanel', 
      anchor: '50%' 
     },{ 
      xtype: 'panel', 
      title: 'Second panel', 
      id: 'secondPanel', 
      margin: '0 -5 0 0' 
     }], 
     listeners:{ 
      afterrender: function(){ 
       setTimeout(function(){resizemainContainer();},100); 
      } 
     } 
    }); 

    Ext.EventManager.onWindowResize(function(w, h){ 
     resizemainContainer(); 
    }); 
}); 

function resizemainContainer(){ 
    var size = Ext.getBody().getViewSize(); 
    var mainContainer = Ext.getCmp('mainContainer'); 
    if(mainContainer){ 
     var firstPanel = Ext.getCmp('firstPanel'); 
     var secondPanel = Ext.getCmp('secondPanel'); 
     if(size.width >= switchWidth){ 
      Ext.apply(firstPanel,{anchor:'50%'}); 
      firstPanel.setSize(size.width/2, size.height - 10); 
      secondPanel.setPosition(size.width/2 + 5, 5); 
      secondPanel.setSize(size.width/2, size.height - 10); 
     } else { 
      Ext.apply(firstPanel,{anchor:'100%' }); 
      firstPanel.setSize(size.width, size.height/2 - 5); 
      secondPanel.setPosition(5, size.height/2 + 5); 
      secondPanel.setSize(size.width, size.height/2 - 10); 
     } 
     mainContainer.setSize(size.width, size.height); 
     mainContainer.doLayout(); 
    } 
}