ExtJS4: Header for the application Home Page..use Image or Toolbar..?

Question

I am working on an application which uses ExtJS4 for the front-end. Right now, I am using a border layout for the home page of my application. I will describe the components in my border layout here:

north: It has a header and a toolbar/menu below it.

west: It has a tree panel.

center: It has tab panels.

Now, my question is related to the header...the header consists of the application logo and application name on the left side and buttons/icons displaying the user name,log out,help,etc on the right side. Also, the menu below it, will display buttons based on the privileges that the current user has!

********* The requirement for the header in the home page of my application is exactly the same as the header of the Sencha homepage http://www.sencha.com/products/extjs/, wherein

• the first row has the Sencha logo and the name Sencha to the left. And to the right, I have my user name,log out,etc.
• the second row is a toolbar/menu with various options in it.

Now,here are my questions:

1. Should I should use an image for the header, if I can use an image then Will I be able to place the icons on that image.?
2. Should I use a toolbar wherein I can place the logo and name to the left, then use a tbfill and place the icons to the end.?

If this is not the right approach to create the header for the home page, Can someone please guide me on any other better approach to this..

Thanks in advance

Answer 1

Maybe try starting with a plain old container with an hbox layout. It can have two items: the first (left) item can be the image and the second (right) can be another container (or even a toolbar) that manages the buttons/links/whatever.

The benefit of this is that you can control each section (right and left) independently in terms of content, widths, etc.

I'd encourage you to look at the source for the kitchen sink site. This is pretty much what they're doing...

Ext.define("KitchenSink.view.Header", {
   extend: "Ext.Container",
   title: "Ext JS Kitchen Sink",
   height: 52,
   layout: {
       type: "hbox",
       align: "middle"
   },
   initComponent: function() {
       ...
       this.items = [
          {xtype: "component",id: "app-header-logo"}, 
          {xtype: "component",id: "app-header-title",html: this.title,flex: 1}
       ];
       if (!Ext.getCmp("options-toolbar")) {
          this.items.push({xtype: "themeSwitcher"})
       }
       this.callParent();
   }
});