CODEWITHSUNDEEP
extjs
Michael Phelps
Michael Phelps

Reputation: 3591

Fluid columns in Ext.panel

Help me please. Tell me how to make the column 20% left,30% +10px right and middle fluide ? I know how to do this through HTML+CSS,but I want to repeat in Ext.js I just found a way with fixed columns:

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

I will also be grateful for the links. Thanks for your help.

Upvotes: 1

Views: 267

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30092

Use a box layout with the flex config. flex is a ratio for the dimensions:

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%'
            }]
        });
    });

Upvotes: 3

Related Questions