PDA

View Full Version : ExtJS Panels - Alignment



rajdev0791
17 Jun 2014, 7:28 PM
I have an ExtJS panel using VBox Layout. Header Panel is supposed to show menus, Search Panel will contain search controls, and the content panel will show search results. Currently the Header Panel sticks to the top of the page. How can I position the header panel 50 px from the top ?

Ext.create('Ext.Panel', {
width: '100%',
height: '100%',
layout: {
type: 'vbox',
align: 'center'
},
renderTo: document.body,
items: [{
xtype: 'panel',
//html: 'Header Panel',
width: '75%',
flex: .50,
//bodyStyle: { "background-color": "#82CAFF" },
tbar: myToolBar
},
{
xtype: 'panel',
html: 'Search Panel',
width: '75%',
flex: 2
},
{
xtype: 'panel',
html: 'Content Panel',
width: '75%',
flex: 6
}]
});

Gary Schlosberg
19 Jun 2014, 8:46 AM
How about using the style config on the header panel.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-style



style: {
marginTop: '50px'
}

rajdev0791
19 Jun 2014, 7:08 PM
Works like a charm . Thanks a ton