Best way to lay out North panel with various child elements

[mfearby]

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]

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]

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]

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]

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]

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-...r-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]

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 :-)