Add an Image to an Ext.TabPanel’s Header

Note: This article was originally written on reich-consulting.net. Reich Web Consulting has narrowed its focus to the web and no longer offers tech support services, so we’ve moved all of our tech support content off-site. We hope you find this article useful. It is provided as-is, and we will no longer provide support on this topic.

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade