PDA

View Full Version : Is there a Sencha Layout Class?



ssdesign
20 Jul 2010, 5:42 PM
I was wondering if we have a easy to use Layout class where I can divide the screen into many segments and have different components displayed in each section.

With iPad kind of applications, this would be really helpful.

Am I missing something that already exists?

Here is what I am trying to do. Is this possible?

http://www.ssdesigninteractive.com/Framework.jpg

Thanks

meyerovb
23 Jul 2010, 7:17 AM
Docks are very powerful for layouts, and remember 'fit' layout is meant to expand a single item to fill the space. By nesting panels with docks and layouts, you can pretty much accomplish any layout you want. Note: think about combining P2 and P4 into a tabpanel, P4 being the tabbar. P3 cannot be set to a tabbar because currently tabbar's are only styled correctly when docked on the top or bottom (add a feature request if you need that functionality, I think it would be a nice to have).



Ext.setup({ onReady: function () {
new Ext.Panel({
fullscreen: true,
layout: 'fit',
dockedItems: [{ dock: 'top', height: 100, html: 'P1', style: 'border:1px solid red;'}],
items: [{ html: 'P2', style: 'border:1px solid blue;',
dockedItems: [
{ dock: 'right', width: 50, html: 'P3', style: 'border:1px solid pink;', scroll: 'vertical', layout: 'vbox' },
{ dock: 'bottom', height: 50, html: 'P4', style: 'border:1px solid orange;', scroll: 'horizontal', layout: 'hbox'}]
}]
});
}});