A Logo Image Applied to an Ext.TabPanel's Header.

Add an Image to an Ext.TabPanel’s Header

A Logo Image Applied to an Ext.TabPanel's Header.

A Logo Image Applied to an Ext.TabPanel's Header.

So you want your logo to render within an Ext.Panel’s header (or title bar, or whatever you feel like calling it). There are a variety of ways to make this happen, but the simplest is simply target it using CSS. Let’s say I have the following TabPanel:

The Code

// In this project I'm using a TabPanel to hold the rest of my content.
p = new Ext.TabPanel({
"id" : "content-panel"
// Other configuration options.
});

I’ve given the TabPanel an id of “content-panel” which I can use to target it in my CSS. To apply my logo to the header, I include the following CSS rules:

#content-panel > .x-tab-panel-header .x-tab-strip {
background: #dfe8f6 url(img/logo.png) no-repeat top left;
padding-top: 43px;
}

Explanation

This is how it works. First I select the TabPanel by id using #content-panel. Using Firebug I’ve determined that the the header element can be selected using the selector .x-tab-panel-header .x-tab-strip, but I use the > symbol to specify only direct descendants of #content-panel, so any inner TabPanel headers are not selected.

The background rule first specifies a background color of #dfe8f6, which is the top-most shade of blue in the header’s background image. When we expand the height of the header in the padding-top rule, the background will be filled in with this shade to stay consistent.

Though the exact element to be targeted may vary, you should be able to use this same method to add images to other types of ExtJS Panels.