Question

请帮帮我。告诉我如何使色谱柱保持20％左右，30％+ 10px左右中间流量？我知道如何通过HTML + CSS来做到这一点，但我想在Ext.js中重复一遍我刚刚找到了固定列的方法：

.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>

我也很感激这些链接。谢谢你的帮助。

Answer 1

使用带有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%'
            }]
        });
    });

Ext.panel中的流体列

1 个答案: