PDA

View Full Version : Add space between buttons



kulshreshtha.s
9 Aug 2011, 12:11 AM
Hi ,

I'm new to sencha touch and web development. I have made a page which have 2 buttons. Right now the buttons are glued to each other with no space between them. I tried putting one empty item in between but it didn't help. How can I provide space between them?


dealraiser.views.DealraiserLanding = Ext.extend(Ext.Panel,{

fullscreen : true,
cls: 'launchscreen',
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
html : 'Welcome to dealraiser',

items: [{
items: [{
xtype: 'button',
text : 'Yes,I have an account',
ui: 'round',
handler: function(){
dealraiser.views.viewport.setActiveItem(dealraiser.views.dealraiserSettings , 'slide');
}

}]
},{
items: [{

xtype: 'button',
text: 'No Thanks, Maybe later',
ui: 'decline-round',
handler: function(){
dealraiser.views.viewport.setActiveItem(dealraiser.views.dealraiserHome , 'slide');
}
}]
}],
initComponent: function() {
dealraiser.views.DealraiserHome.superclass.initComponent.apply(this, arguments);
}


});

fx-mike
9 Aug 2011, 2:36 AM
use


{xtype: 'spacer'}

instead of an empty item

jjerome
9 Aug 2011, 7:54 AM
use


{xtype: 'spacer'}

instead of an empty item


To kulshreshtha.s:

here is a good example of how it is used (in case you need it, i may be too late):
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Spacer

Pud9y
9 Aug 2011, 5:09 PM
If the spacer doesn't do what you want, you could always just add a class and use CSS to separate it with a margin.
Isn't that the beauty of a web app? :P

appsandcheese.com
9 Aug 2011, 6:59 PM
{xtype: 'spacer', width: 10} will force spacer to specific width.
However as noted above this would probably be better handled via app specific css (left/right margin) as spacer will create another DOM element.