PDA

View Full Version : Best way to lay out North panel with various child elements



mfearby
8 Aug 2011, 4:30 AM
I'm working on an ExtJS page skeleton that I can use at work to replace an ASP.NET/Telerik controls system, and I'm wondering what would be the best way to construct the header. It should have an image that floats right, a heading top left, a sub-heading below that, and then below that a menu bar (that could go up to the left edge of the logo which floats right).

I was thinking of an anchor layout, but I'm having problems getting the label at the top-left to obey my margin/padding settings; it just does not want to have a top margin, and the top padding gets ignored over a certain extent, which means that heading is stuck that close to the top of the page whether I like it or not.

So my question is either a) how do I get that margin to work on the label or b) what's the best kind of layout to have in my North region to house these four different elements? Would a Table Layout be too weighty or do you think that'd be just fine? I realise that panels with panels ad infinitum isn't good, so I'm going for efficiency, I guess, because I hope to re-use this template in all kinds of in-house corporate apps into the future, and to replace all the ASP.NET/Telerik stuff that I have inherited. Naturally, a Sencha 1-pack license will be getting ordered ASAP, as I'm using a trial version of Ext Designer at home and I don't ever want to write GUI code again after using it :-)

Thanks.

Here's what I've been working on so far (as an attachment; I can't seem to paste the code into this editor for some reason - I'm using Ubuntu 10.04 with Firefox 3.6.18).

Mycoding
8 Aug 2011, 7:21 AM
I am sorry I didn't get what kind of advice you need.
Do you need advice how to position elements in north region?

I run you sample actually I would do like this.
Could you be so kind to write more about system you want to develop?
Maybe there is other much easier way to postion component in system.

mfearby
8 Aug 2011, 3:41 PM
I guess I'm just wondering what is the best/most efficient way to lay out the items in the North region of the BorderLayout viewport. I could probably do it as a TableLayout but I'm just wondering if that's the best way to do it, since adding too many panels as children of other panels I gather (from various forum posts) is not a good idea (for speed/efficiency reasons).



Name of Application

****************


Sub-heading/page title
****************


MENU BAR GOES ALONG HERE...................................................................
****************



The three rows of asterisks represent what would be (in a table) a rowspan=3 where I would put an image. I could do it as a TableLayout and it would work, but I'm just wondering if this is considered bad form to put this inside a BorderLayout north region. Would an AnchorLayout be better (providing I can align/anchor things the way I want)?

wickedsheep
9 Aug 2011, 12:25 AM
Depends on your application, but if you are searching for the most performance efficient solution, create a template on your north region panel and style it with css.



var w = new Ext.Window({
xtype: 'window',
title: 'My Window',
width: 800,
height: 600,
layout: 'border',
items: [
{
xtype: 'panel',
title: 'My Panel',
region: 'center'
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100,
margins: '0 5 0 5'
},
{
xtype: 'panel',
title: 'My Panel',
region: 'east',
width: 100,
margins: '0 5 0 5'
},
{
xtype: 'panel',
region: 'north',
ref: 'Header',
height: 100,
margins: '5 5 5 5',
tpl: new Ext.XTemplate(
'<div class="title">{title}</div>',
'<div class="subtitle">{subtitle}</div>'
),
bbar: [
{ xtype: 'button', text: 'Menu button 1' },
{ xtype: 'button', text: 'Menu button 2' }
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'south',
height: 100,
margins: '5 5 5 5'
}
],
fbar: {
xtype: 'toolbar',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Header 1',
handler: function() {
w.Header.update({
title: 'Title 1',
subtitle: 'Subtitle 1'
});
}
},
{
xtype: 'button',
text: 'Header 2',
handler: function() {
w.Header.update({
title: 'Title 2',
subtitle: 'Subtitle 2'
});
}
},
{
xtype: 'button',
text: 'Header 3',
handler: function() {
w.Header.update({
title: 'Title 3',
subtitle: 'Subtitle 3'
});
}
}
]
}
});
w.show();

mfearby
9 Aug 2011, 2:57 AM
Thanks. That certainly looks like it would be efficient. I don't suppose you know how I would programmatically talk to the template inside the north region? I tried giving the north region an id of "header" and doing this to apply the template but it didn't like it:

var data = {
title: 'Application Title',
subtitle: 'Page Title'
};
var header = Ext.getCmp('header');
header.overwrite(header.body, data);

I can't (so far) see any getRegion() or getTemplate() methods in the API documentation for BorderLayout or Panel, so I'm not quite sure how I can talk to that template to apply the values at run time. Thanks.

wickedsheep
9 Aug 2011, 3:17 AM
You already have this in the example. If you click on the bottom buttons (Header 1, Header 2, ...), the data in the north panel will change. I gave the north region panel a ref property, calling it Header. This actually gives your component a name. VinylFox wrote more about it and I suggest you read this first. http://www.vinylfox.com/the-hottest-extjs-30-feature-youve-never-heard-about/

I'll try to simplify the steps involved:

1. name your component:


var win = new Ext.Window({
...,
items: [
...,
{
xtype: 'panel',
...
ref: 'MyComponentName1',
...
},
...
]
});


2. access your component:


var northRegionPanel = win.MyComponentName1;


3. use your components methods (in our case Panel methods). To update a component template you can initially use the data property or to do it programatically you should use the update() method:


northRegionPanel.update({
title: 'Application name',
...
});

mfearby
9 Aug 2011, 3:42 AM
You already have this in the example. If you click on the bottom buttons (Header 1, Header 2, ...), the data in the north panel will change.

Ooops. My bad. I didn't pay any attention to the menu bar code thinking that it would have just been boiler-plate UI layout. How wrong I was. You have gone over and above the call of duty in answering my question. Thank you very much, kind wickedsheep :-)