View Full Version : Header for the application Home Page..use Image or Toolbar..??

11 Sep 2014, 1:50 AM
Hi All

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!

Note: The requirement for the header in the home page of my application is exactly the same as the header of this page(the Sencha Forum homepage), 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

11 Sep 2014, 2:34 PM
There are several approaches: Container with hbox layout with image to left and toolbar to right, then toolbar below comes to mind.

Not sure why would want to place icons *on the image, unless I did not understand your intent.


11 Sep 2014, 10:12 PM
Thanks.. As u said, I am planning on using a container with hbox layout. But, I want the background of the container to be the default ext-classic theme.. Is it possible to use the theme for the background of the container?

12 Sep 2014, 9:51 AM
Like this?

Ext.create('Ext.panel.Panel', {
//title: 'My Panel',
renderTo: Ext.getBody(),
bodyStyle: "background-image:url(http://www.sencha.com/img/apple-touch-icon.png) !important",
height: 150,
width: 150,

items: [{
xtype: 'button',
text: 'click me'