Ext.panel中的流體色譜柱

請幫助我。請告訴我如何使色譜柱保持20％左右，30％+ 10px的右側和中間流動？我知道如何通過HTML + CSS做到這一點，但我想在Ext.js 重複我只是找到了一種與固定列：Ext.panel中的流體色譜柱

.foo{border:3px solid red;width:800px;margin:0 auto} 
    </style> 
    </head> 
    <body> 


<?php 

?> 
<div class="foo"></div> 

<script> 

Ext.onReady(function(){ 
    var panel = Ext.create('Ext.panel.Panel', { 
     title : 'wrapper', 
     width : 800, 
     height: 300, 
     // html : ' Контент Контент Контент Контент Контент ', 
     renderTo : Ext.query(".foo")[0], 

    layout:'border', 

    items:[ 
{ 
    xtype : 'panel', 
      region: 'center',  
    title : 'center', // св-во title отвечает за заголовок компонента (панели). 
    // width : 200, 
     height: 300, 
     html : ' centerBar ', 
    layout:'border', 
    items:[{ 
     xtype : 'panel', 
     region: 'center',  
    title : 'center_mid', 
     html : ' centermid ' 
},{ 
     xtype : 'panel', 
     region: 'east',  
    title : 'centereast', 
    width:100, 
     height: 30, 
     html : ' centereast ' 
}] 

} 
, 
{ 
    xtype : 'panel', 
      region: 'north',  
    title : 'north', 
     height: 90, 
     html : ' centerBar ' 

} 
, 
{ 
     xtype : 'panel', 
     region: 'east',  
    title : 'left', 
     width : 200, 
     height: 300, 
     html : ' leftBar ', 

},{ 
    xtype : 'panel', 
     region: 'west',  

     width : 100, 
     height: 300, 
     html : ' rightBar ', 


}] 

    }); 

}); 

     </script>

我也將是鏈接感謝。感謝您的幫助。

來源

2013-08-17 Michael Phelps

在flex配置中使用盒子佈局。 flex是尺寸比例：

Ext.require('*'); 

    Ext.onReady(function() { 
     new Ext.container.Container({ 
      width: 1000, 
      height: 300, 
      renderTo: document.body, 
      layout: { 
       type: 'hbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       flex: 2, 
       title: '20%'  
      }, { 
       flex: 5, 
       title: '50%' 
      }, { 
       flex: 3, 
       title: '30%' 
      }] 
     }); 
    });

來源

2013-08-18 02:12:05

Ext.panel中的流體色譜柱

回答

相關問題