PDA

View Full Version : change Tab color



k_davidam
26 Nov 2007, 11:35 PM
Hi all

I want to change tab color dynamicly, is it possible ? Anyone have e good idea?

evant
27 Nov 2007, 4:31 AM
Your best bet is to inspect the tabs with firebug to see which classes are applied. From here, you can modify them at runtime.

k_davidam
27 Nov 2007, 5:52 AM
Your best bet is to inspect the tabs with firebug to see which classes are applied. From here, you can modify them at runtime.

I want to do anything like this, I have some tabs, and I want to right click on tab, choose new color, and change the tab color at once, not at runtime.

tryanDLS
27 Nov 2007, 9:47 AM
You mean you want to display a contextmenu with a colorpicker when you right click the tab?

k_davidam
28 Nov 2007, 12:51 AM
You mean you want to display a contextmenu with a colorpicker when you right click the tab?

yes, and after i choose the color, at once change the tab color

itwasnoteasy
6 Dec 2007, 6:57 PM
Hi all

I want to change tab color dynamicly, is it possible ? Anyone have e good idea?

Did you get any luck on this??? I also need same kind of feature but at the load time. I want to have 2 fixed tabs with different color and other tabs which will be opened dynamically in different color.

codeslinger
5 Mar 2009, 4:22 PM
Did you get any luck on this??? I also need same kind of feature but at the load time. I want to have 2 fixed tabs with different color and other tabs which will be opened dynamically in different color.

Working on the same issue right now. Anybody with a solution please speak up :-)

jbird526
16 Apr 2009, 11:40 AM
Working on the same issue right now. Anybody with a solution please speak up :-)

Trying to figure this out myself. Im using an extended tab class and using firebug but not having any luck. Believe I am trying to remove and addClass on the wrong elements.

jbird526
16 Apr 2009, 12:56 PM
Ok so this is what I have so far. There is some code commented out and some other sloppy stuff so please excuse the mess, but it is slowly coming together. The main thing to look at is setTabStyle.


This is the Tabpanel class

Ext.namespace('Ext.umuc');

Ext.umuc.AnnouncementTabs = Ext.extend(Ext.TabPanel, {

// configurables
// anything what is here can be configured from outside


// {{{
initComponent: function(){
// {{{
Ext.apply(this, { // anything here, e.g. items, tools or buttons arrays,
// cannot be changed from outside


}); // eo apply
// }}}

// call parent
Ext.umuc.AnnouncementTabs.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers

}, // eo function initComponent
// }}}
// {{{
onRender: function(){
Ext.Ajax.request({
url: 'announcementsV2.json',
method: "GET",
success: function(response, options){
var res = Ext.decode(response.responseText);
var announcement = res.section; // get the conference array
var tabPanel = Ext.getCmp('announcement-tabpanel');

for (var i = 0; i < announcement.length; i++) {
var announcementTab = new Ext.umuc.AnnouncementTabsIndividual({
id:announcement[i].type,
title: announcement[i].announcementTitle,
cls:announcement[i].cls,
iconCls:announcement[i].iconCls,
autoHeight : true,
autoWidth: true,
frame:false,
border : false
});



// now add the notes for this conference to the conference panel
var announcementText = announcement[i].rows;

for (var n = 0; n < announcementText.length; n++) {
var announcementTextPanel = new Ext.umuc.AnnouncementViewPanel({
title: announcementText[n].title + ' - ' + announcementText[n].date,
iconCls:announcement[i].iconCls,
contentID:announcementText[n].id,
border: false,
frame: false,
collapsible : true,
data: announcementText[n],
collapseFirst : false,
//anchorSelector:'div.text-expanded a',
tools:[{
id:'gear',
qtip:'Mark as Read',
//handler: this.layoutPanel.onEditClick,
scope:this

}]

});
// add this to the conference panel
announcementTab.add(announcementTextPanel);
} // end for

tabPanel.add(announcementTab);
announcementTab.setTabStyle();
}

tabPanel.setActiveTab(0);
tabPanel.doLayout();

}
});
// before parent code

// call parent
Ext.umuc.AnnouncementTabs.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components

} // eo function onRender
// }}}

// any other added/overrided methods


}); // eo extend
// register xtype
Ext.reg('announcementtabs', Ext.umuc.AnnouncementTabs);



This is the individual Panel class

Ext.namespace('Ext.umuc');

Ext.umuc.AnnouncementTabsIndividual = Ext.extend(Ext.Panel, {

// configurables
// anything what is here can be configured from outside
anchorSelector:'div.text-expanded a',
targetWindow: 'tychohref',
// {{{
initComponent:function() {
// {{{
// make sure the list is clear
this.anchors = null;

Ext.apply(this, {
// anything here, e.g. items, tools or buttons arrays,
// cannot be changed from outside

}); // eo apply
// }}}

// call parent
Ext.umuc.AnnouncementTabsIndividual.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers
/* this.on('documentloaded',function(frame){
frame.getDoc().on('click',function(e){
e.target.target = '_blank';
},null, {delegate:'a'});
}); */
/*this.on({
click:{
scope:this,
fn:this.onNodeClick,
stopEvent:true
}
});*/

}, // eo function initComponent
// }}}
// {{{
onRender:function() {

// before parent code

// call parent
Ext.umuc.AnnouncementTabsIndividual.superclass.onRender.apply(this, arguments);

// after parent code, e.g. install event handlers on rendered components


}, // eo function onRender
// }}}

setTabStyle:function(){
console.log('hi');

var x = this.ownerCt.getTabEl(this);
var z = Ext.fly(x).child('span.x-tab-strip-inner');

z.removeClass('x-tab-strip-inner');


if (this.id == 1) {
z.addClass('altRed');
}else if (this.id == 2){
z.addClass('altGold');
}else if (this.id == 3){
z.addClass('altGold');
}else if (this.id == 4){
z.addClass('altBlue');
}





console.log('bye');
},

afterRender: function()
{
Ext.umuc.AnnouncementTabsIndividual.superclass.afterRender.call(this);

// if there is no anchor selector specified, do not try to capture links
if (Ext.type(this.anchorSelector) !== 'string')
return;

// get a list of all the hyperlinks in the content
this.anchors = this.body.select(this.anchorSelector);

// trap clicking on the link and open a window
this.anchors.on('click', this.captureLinks, this);
},


// any other added/overrided methods
captureLinks: function(e, t)
{
// prevent the event from being sent to other components or the browser
e.stopEvent();

// get the real target in case they clicked on an image or something
t = e.getTarget('a');

// check if there is a specified target
window.open(t.href, this.targetWindow);
},
clearLinks: function()
{
if (this.anchors)
{
this.anchors.un('click', this.captureLinks, this);
this.anchors = null;
}
}

}); // eo extend

// register xtype
Ext.reg('announcementtabsindividual', Ext.umuc.AnnouncementTabsIndividual);


JSON string


{"success":true,"class":"0806 TEST101 Section 6980"

,"section":[

{"announcementTitle":"Class Announcements"
,"iconCls":"icon-class"
,"cls":"cls-class"
,"collapsed":false
,"type":"4"
,"rows":[

{"id":"8d050cb683ab5bdc3b9c3b9c07162faf"
,"title":"Week Two "
,"body":"<p><img alt=\"\" src=\"http://images.allrecipes.com/site/allrecipes/area/community/userphoto/small/121327.jpg\"</p><br/><br/>This may seem a bit simplistic, but it fairly accurately describes the current economic crisis in one drawing. You might find it interesting to review.<br/><br/><a href=\"http://www.rgemonitor.com/globalmacro-monitor/254697/origins_of_the_economic_crisis_-_in_one_chart\">http://www.rgemonitor.com/globalmacro-monitor/254697/origins_of_the_economic_crisis_-_in_one_chart</a><br/><br/><br/>"
,"date":"November 12, 2008 2:26 PM"
,"type":"4"}

,{"id":"8d050cb683ab5bdc3b9c3b9c07162cac"
,"title":"Week One "
,"body":"<p>************ Start Display Current Environment ************ <br />WebSphere Platform 6.1 [EJB3 6.1.0.17 cf170821.02] [BASE 6.1.0.17 cf170821.07] running with process name lwpsandboxNode05Cell\\lwpsandboxNode05\\server1 and process id 1556 <br />Host Operating System is Windows XP, version 5.1 build 2600 Service Pack 2 <br />Java version = J2RE 1.5.0 IBM J9 2.3 Windows XP x86-32 j9vmwi3223-20080315(JIT enabled) <br />J9VM - 20080314_17962_lHdSMr <br />JIT - 20080130_0718ifx2_r8 <br />GC - 200802_08Java Compiler = j9jit23, Java VM name = IBM J9 VM <br />was.install.root = C:/Program Files/IBM/WebSphere</p>"
,"date":"November 11, 2008 2:26 PM"
,"type":"4"}
]}

,{"announcementTitle":"System Announcements"
,"iconCls":"icon-system"
,"cls":"cls-system"
,"collapsed":true
,"type":"1"
,"rows":[

{"id":"8cfa69b083ab5bdc3b9c3b9cdf495191"
,"title":"Planned outage"
,"body":"<p>Tycho is scheduled for outage on 12/12/2012!</p>"
,"date":"November 16, 2008 2:15 PM"
,"type":"1"
}
]}

,{"announcementTitle":"University Announcements"
,"iconCls":"icon-university"
,"cls":"cls-faculty"
,"collapsed":true
,"type":"2"
,"rows":[

{"id":"8d024e4183ab5bdc3b9c3b9c544d4fc3"
,"title":"Planned outage"
,"body":"<p>Test</p>"
,"date":"November 11, 2008 2:23 PM"
,"type":"2"}

,{"id":"8d03c4a583ab5bdc3b9c3b9c944fcea0"
,"title":"Faculty Announcement"
,"body":"<p>If you're here that means you have mastered the task of logging into Webtycho!</p>"
,"date":"November 15, 2008 2:25 PM"
,"type":"2"}
]}


,{"announcementTitle":"Faculty Announcements"
,"iconCls":"icon-faculty"
,"cls":"cls-faculty"
,"collapsed":true
,"type":"3"
,"rows":[

{"id":"8d024e4183ab5bdc3b9c3b9c544d4fc3"
,"title":"Planned outage"
,"body":"<p>Test</p>"
,"date":"November 11, 2008 2:23 PM"
,"type":"3"}

,{"id":"8d03c4a583ab5bdc3b9c3b9c944fcea0"
,"title":"Faculty Announcement"
,"body":"<p>If you're here that means you have mastered the task of logging into Webtycho!</p>"
,"date":"November 15, 2008 2:25 PM"
,"type":"3"}
]}



]}

http://mysite.verizon.net/vzevn2mf/ext_forum/tabs.png

PierceSD
16 Apr 2009, 3:09 PM
You can't really change the color of tabs to any arbitrary color because Ext styles tabs using sprites (several images grafted together in a single image file). You can create new sprites and accompanying CSS for each color you want to support. The example below would do the trick, and would color the sides of the tab, too.

First, you'd need something like this in your style sheet:



.x-tab-strip .x-tab-red .x-tab-right,
.x-tab-strip .x-tab-red .x-tab-left,
.x-tab-strip .x-tab-red .x-tab-strip-inner {
background-image: url(/yourimages/tabs-sprite-red.gif);
}


Then you could change the color of your tabs dynamically and simply. Add the following to your Panel definition (not the TabPanel container):



...
tabType: "",
setType: function( type )
{
var tabEl = this.ownerCt.getTabEl( this );
tabEl.removeClass( "x-tab-" + this.tabType );
if (type) tabEl.addClass( "x-tab-" + type );
this.tabType = type;
}
...


Doing it this way would let you change between styles, or back to the default Ext style.

There are other ways that would allow you to be more arbitrary with the colors, but this way is probably the simplest and would preserve the Ext theme better.

silverblue_phoenix
9 Sep 2009, 1:49 AM
hi pierceSD

i did not quite understood ur solution. how do i implement ur setType function? do i extend/override Ext.Panel or Ext.TabPanel?

thanks!

i want to do something like this:
http://thumb14.webshots.net/t/68/468/6/46/9/2097646090104898814lBNfwN_th.jpg (http://entertainment.webshots.com/photo/2097646090104898814lBNfwN)

PierceSD
18 Sep 2009, 11:04 AM
Sorry, I've had trouble logging in to the forum for some time and haven't been able to respond.

Are you trying to change the look of TabFolder to match the image? If so, a better approach would be to use your own stylesheet to change the default CSS rules for tabs. You'll need to create new images. Usually, I use FireBug to inspect the widget elements I'm interested in changing to see the CSS rules in place and to determine which images are used. Then, if necessary, I make a copy of the Ext image and edit it to make the new look.

If you're really trying to change colors of tabs on the fly (e.g., when the data determines what color the tab should be), then there's a few approaches you can take.

1) If you only need to determine the tab color when you create the tab, and not afterwards, use the tabCls configuration:



//inside some function that adds tabs to an existing tab panel.
...
var tabColor = "red"; //or some code to determine the tab color based on the data

myTabPanel.add( new Ext.Panel({
title: "My Red Tab",
tabCls: "x-tab-" + tabColor,
...
});


2) If you need to change the tab color in response to a change in the data after the tab is created, you could extend either TabPanel


myapp.ColoredTabPanel = Ext.extend( Ext.TabPanel, {
setTabColor: function( tab, newColor ) {
var tabEl = Ext.get( this.getTabEl( tab ) );
tabEl.removeClass( "x-tab-" + tab.tabColor );
if ( newColor ) tabEl.addClass( "x-tab-" + newColor );
tab.tabColor = newColor;
}
} );


or you could extend tab



myapp.ColoredTab = Ext.extend( Ext.TabPanel, {
setTabColor: function( newColor ) {
var tabEl = Ext.get( this.ownerCt.getTabEl( this ) );
... // same as above, but replace "tab" with "this"
}
} );


Note that I put getTabEl() inside an Ext.get(). I forgot that getTabEl() returns an HTMLElement rather than a Ext.Element.

Note2: Even if you use the code snippets above, you'll still need to implement your own CSS stylesheet and edit the sprite images to change the look.