How to make a layout ExtJS tables have a percentage instead of absolute values ​​in height and width?

Question

Using the Ext.Panel and table layout, I was able to create the layout the way I want. However, how to change this code so that I can proportionally determine the width and height?

eg. the table should not be 800 pixels, but 100% of the screen width, and each cell should not be 200 pixels, but 25%.

here is the code:

 <script type="text/javascript"> clearExtjsComponent(targetRegion); var table_wrapper2 = new Ext.Panel({ id: 'table_wrapper2', baseCls: 'x-plain', renderTo: Ext.getBody(), layout:'table', layoutConfig: {columns:2}, defaults: { frame:true, width:200, height: 200, style: 'margin: 0 10px 10px 0' }, items:[{ title:'Shopping Cart', width: 400, height: 290, colspan: 2 },{ title:'Invoice Address', width: 190, height: 100 },{ title:'Delivery Address', width: 200, height: 100 } ] }) var table_wrapper = new Ext.Panel({ id:'table_wrapper', baseCls:'x-plain', renderTo: Ext.getBody(), layout:'table', layoutConfig: {columns:4}, defaults: { frame:true, width:200, height: 200, style: 'margin: 10px 0 0 10px' }, items:[{ title:'Orders', width: 810, colspan: 4 },{ title:'Customer Information', width: 400, height: 400, colspan: 2 },{ //title:'Shopping Cart', frame: false, border: false, width: 400, height: 400, colspan: 2, items: [ table_wrapper2 ] } ] }); replaceComponentContent(targetRegion, table_wrapper); hideComponent(regionHelp); </script> 

Answer 1

Instead:

  layout:'table', layoutConfig: {columns:2}, 

try the following:

  layout: { type: 'table', columns: 3, tableAttrs: { style: { width: '100%', height: '100%' } } }, 

Answer 2

As I said in response to your other thread using vbox and hbox layouts, it might be a little easier for you if you want to do relative positioning. Also, if you want to stretch something in your window, put it in the Viewport, which automatically uses your window.

You might want to change the layout a bit (borders, frames), but with vbox and hbox layouts it will be something like this:

 new Ext.Viewport({ layout: 'vbox', layoutConfig: { align : 'stretch', pack : 'start' }, defaults: { style: 'margin: 10px 0 0 10px' }, items:[{ title:'Orders', height: 200 },{ layout: 'hbox', flex: 1, layoutConfig: { align : 'stretch', pack : 'start' }, items: [{ title:'Customer Information', flex: 1 },{ layout: 'vbox', flex: 1, layoutConfig: { align : 'stretch', pack : 'start' }, items: [{ title: 'Shopping cart', height: 200 },{ layout: 'hbox', flex: 1, layoutConfig: { align : 'stretch', pack : 'start' }, items: [{ title: 'Invoice address', flex: 1 },{ title: 'Delivery address', flex: 1 }] }] }] } ] }); 

Answer 3

try this example: https://fiddle.sencha.com/#fiddle/2dm

 Ext.create('Ext.panel.Panel', { title: 'Car Simple Tree', height: 200, //Fixed height for this panel renderTo: Ext.getBody(), layout: { type: 'table', columns: 2, tableAttrs: { style: { width: '100%' // To make the cell width 100% } } }, items: [{ xtype: 'panel', title: 'panel title', collapsible: true, titleCollapse: true, bodyStyle: { background: '#D9E5F3', borderColor: '#99BCE8', borderWidth: '1px' }, //scrollable: true, //autoScroll: true, layout: { pack: 'center', type: 'hbox' }, rowspan: 1, colspan: 2, width: '100%', items: [{ text: 'Save', xtype: 'button', padding: 5 }] }, { html: 'Cell C content', cellCls: 'highlight' }, { html: 'Cell D content' }] }); 

Answer 4

Use a ColumnLayout . This gives you a choice between pixels and percent for width.