PDA

View Full Version : TabPanel with first tab offset from default position



cavalleydude
3 May 2010, 9:35 AM
Hello, I've searched everywhere for this before posting this question...
I want to add an application logo in the top left corner of my application which consists primarily of a tabbed panel with various tabs. I want my logo text (or image) to be located just before the FIRST tab (not above or below, but just left of the tab). See the attached drawing. Is there a way to offset this first tab in order to obtain this desired view?

20289

Any help would be greatly appreciated.

Thanks,
cavalleydude

evant
3 May 2010, 10:34 AM
There's no built in way to do it, but if you can quite easily create a place holder tab and then put your own content in.

evant
3 May 2010, 10:39 AM
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
width: 400,
height: 400,
plain: true,
renderTo: document.body,
items: [{
title: 'Fake'
},{
title: 'a'
},{
title: 'b'
},{
title: 'c'
}]
});

var el = tabs.getTabEl(0);
el.innerHTML = '';
Ext.fly(el).createChild({
tag: 'div',
cn: [{
tag: 'span',
style: 'color: red;',
html: 'Fooooooo'
},{
tag: 'span',
cls: 'x-tab-strip-text',
style: 'display: none;'
}]
});
Ext.fly(el).swallowEvent('click');
});


You'll need to mess about with it, but you get the idea.

cavalleydude
3 May 2010, 11:21 AM
Okay, thank you. I'm trying what you suggested and will post results...

cavalleydude
3 May 2010, 11:55 AM
Yes, this works perfectly. I am able to change the html content of the first "Fake" tab with my image and it looks exactly the way I wanted it. Hopefully this will be useful to others also.

Modified to show my image...

var el = tabs.getTabEl(0);
el.innerHTML = '';
Ext.fly(el).createChild({
tag: 'div',
cn: [{
tag: 'span',
//style: 'color: red;',
html: '<img src="images/appLogo.png" width="30" height="30">'
},{
tag: 'span'
//cls: 'x-tab-strip-text',
//style: 'display: none;'
}]
});
Ext.fly(el).swallowEvent('click');

Thank you!