1

请帮帮我。告诉我如何使列左侧 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>

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

4

1 回答 1

3

使用带有 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-18T02:12:05.093 回答