JavaScript
Run Code
Open in Fiddle
Ext.application({ name : 'Fiddle', launch : function() { var responsiveWidthBreakPoint = 600; var responsiveConfig = {}; // minimized view responsiveConfig['width < ' + responsiveWidthBreakPoint] = { layout: { type: 'box', vertical: true, align: 'stretch' } }; // maximized view responsiveConfig['width >= ' + responsiveWidthBreakPoint] = { layout: { type: 'box', vertical: false } }; Ext.create({ xtype: 'viewport', defaults: { xtype: 'panel', frame: true, margin: 5, html: 'Body Text' }, responsiveConfig: responsiveConfig, items: [{ title: 'Center', flex: 1, },{ title: 'Side/Bottom Content', minWidth: 150 }] }); } });