PDA

View Full Version : noob question regarding styles



momesana
11 Oct 2010, 7:02 AM
Edit: Title should be noob question regarding layouts :-)
Hi,
I am trying to subclass an Ext.Panel so it contains three different child items by default. I want these to be laid out vertically, thus I used the following code:



Ext.ux.Screen = Ext.extend( Ext.Panel, {
initComponent : function() {
this.headerPanel = new Ext.Panel({
html: 'header'
});

this.contentPanel = new Ext.Panel({
html: 'content'
});

this.footerPanel = new Ext.Panel({
html: 'footer'
});

Ext.apply(this, {
layout : 'vbox',
applyTo: Ext.getBody(),
items : [ this.headerPanel, this.contentPanel, this.footerPanel ]
})
Ext.ux.Screen.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('screen', Ext.ux.Screen);

Unfortunately, the items are not shown as the size of some inner divs shrink to zero. If I completely take away the layout option or set the value to 'form' the items are displayed properly. If I use 'fit' as layout they are also shown but the header item takes up more space for whatever reason. That's all very confusing since I would expect fit to expand the first element to take up the whole panel (since it actually expects a single child item). In contrast I would expect the vbox option to be the perfect fit, vertically ordering the items after each other. But somehow it doesn't work. Can anyone tell me what exactly I am doing wrong?

Thanks in advance

Condor
11 Oct 2010, 7:09 AM
1. Is this component going to cover the entire screen? In that case you should extend Ext.Viewport and not Ext.Panel!
2. Don't your header and footer panels need a height and the center panel flex:1?

momesana
11 Oct 2010, 7:25 AM
1. Is this component going to cover the entire screen? In that case you should extend Ext.Viewport and not Ext.Panel!
2. Don't your header and footer panels need a height and the center panel flex:1?
Thanks, using Viewport fixed it. Actually I am trying to create a base screen class for my Sencha Touch application but resorted to Ext js for testing so the ultimate resulting class is going to be based on Ext.Panel.

Thanks a lot for the quick answer.

Animal
11 Oct 2010, 7:54 AM
You can run Sencha Touch apps on Safari and Chrome, so you can write and test a complex subclass on a good debugging platform before deploying to a mini-device.