PDA

View Full Version : How to create vertical spacers?



Jack9
21 Sep 2009, 9:53 AM
I have a panel with elements that I want to space vertically as such:


new Ext.Panel({
items:[
new Ext.form.Label({
text: "Blah blah blah, blah blah blah. Blah blah blah blah? Blah blah blah blah blah blah blah." // I know this is a runon sentence
}),

// SPACER

new Ext.Button({
text: 'My Button',
handler: function(){
mywindow.show();
},
tooltip: {
title:'It's a button yo',
text:'Click to see stuff happen'
}
})
]
});

I've tried a couple different ways (unsuccessfully) but I'm really interested in how it should be done.

aconran
21 Sep 2009, 9:59 AM
Well Panel's get the ability to place their buttons down at the bottom as an out of the box feature. Place all of your buttons in an array in the fbar configuration of an Ext.Panel. This will place them in the bottom floating bar of the Panel.

You could have also created this layout with a vbox layout and specified a particular height or flex value for the Spacer in the middle.

Jack9
21 Sep 2009, 10:14 AM
I'm looking for the best way to create a vertical spacer. I have more elements beneath the button, but I thought that was sufficient for a test case. Perhaps a more complete illustration would help:



var testFieldset = new Ext.form.FieldSet({
title: 'Test',
autoWidth: true,
autoHeight: true,
items: [
new Ext.Panel({
items:[
new Ext.form.Label({
text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco."
}),
//SPACER
new Ext.Button({
text: 'Manage Button'
})
]
}),
//SPACER
someGrid
]
});

Animal
21 Sep 2009, 10:20 AM
You mean margins above or below elements?

As in



style: {
'margin-top': '20px'
}


or

cls: 'extra-margin-top'


?

Jack9
21 Sep 2009, 10:25 AM
I was thinking more of an empty named div with a height. Like a hidden panel. Perhaps I will just have to do with styling and then dynamically add/remove both the styles and a dynamic element.

Animal
21 Sep 2009, 11:17 AM
Yep, add a boxcomponent with a height. Simples.

steveattwell
1 Apr 2013, 5:50 AM
{ xtype: "spacer",
height : 10},

javeed
3 Apr 2013, 2:32 AM
Can i use Dream viewer for that. I have Experience in Web Development Specially in HTML.