viewport layout:border margin around

[zlevardy]

hi,

I am trying to add some space around my application in the browser window. It would be nice to have a 20 pixels around it. Unfortunatelly I does not working as I am trying it. Also you see I'am setting background color to black. That is the good place to do it?

Ext.define('MyApp.view.Viewport', {    extend: 'Ext.container.Viewport',


	layout: 'border',
	style: {
		color: '#FFFFFF',
		backgroundColor: '#000000'
    	,margin: 20,
    	padding: 10
    },
    bodyStyle: {
		margin: 20,
    	padding: 10
    }

thx

[sword-it]

Hi!

here is a sample for you:-

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Border Layout',
    style:'border:1px solid;margin:20px;padding:20px;background:red',
    layout: 'border',
    items: [{
        title: 'South Region',
        region: 'south',
        xtype: 'panel',
        height: 100,
        margins: '0 5 5 5'
    },{        
        title: 'West Region',
        region:'west',
        xtype: 'panel',
        margins: '5 0 0 5',
        width: 200,
        layout: 'fit'
    },{
        title: 'Center',
        region: 'center',  
        xtype: 'panel',
        layout: 'fit',
        margins: '5 5 0 0'
    }],
    renderTo: Ext.getBody()
});

Output:-
border.png