Best layout for centered buttons with padding?

[dr-dan]

Hi

I'm like 2 days into Ext JS...

I have created a panel with a column layout, with 4 buttons in it, each taking up .25 columnWidth (have also tried with a fixed width instead).

I'm guessing this is why neither the properties: padding, style, or defaults: bodystyle is taking effect, but basically I want to ensure buttons have some space/border/padding between them. currently they are buffed up against each other.

Whats the way round it?


Ext.define('MyApp.view.SurveyButtonsPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.surveyButtonsPanel',


id: 'survey-buttons-panel',
layout: {
type: 'column'
},
defaults: {
bodyStyle: 'padding:10px;'
},
title: '',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'button',
height: 65,
id: 'ResetButton',
padding: 10,
style: 'padding:20px;',
text: 'Reset',
width: 172
},
{
xtype: 'button',
height: 65,
id: 'PreviousButton',
text: 'Previous',
width: 172
},
{
xtype: 'button',
height: 65,
id: 'SkipButton',
text: 'Skip',
width: 172
},
{
xtype: 'button',
height: 65,
id: 'NextButton',
text: 'Next',
width: 172
}
]
});


me.callParent(arguments);
}


});

[dr-dan]

using marginRight on the item ended up doing the trick


style: { marginRight: '10px' }

for the spacing above and below, i used padding on the container:


style: { padding: '10px' }

[sword-it]

Hi!
Below is working fine for me:-



var form = Ext.create('Ext.form.Panel', {
title: 'Simple Display',
autoHeight:true,
renderTo: Ext.getBody(),
layout:"column",
items:[{
xtype:"htmleditor",
columnWidth:1,
name:"a"
}],
buttons:[{
text:"Print DisplayField",
style:'margin-right:40px;padding:15px;'
}]
});



Output:-

36883