Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: change Tab color

  1. #1

    Default change Tab color

    Hi all

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

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Your best bet is to inspect the tabs with firebug to see which classes are applied. From here, you can modify them at runtime.

  3. #3

    Default

    Quote Originally Posted by evant View Post
    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.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    You mean you want to display a contextmenu with a colorpicker when you right click the tab?

  5. #5

    Default

    Quote Originally Posted by tryanDLS View Post
    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

  6. #6

    Default

    Quote Originally Posted by k_davidam View Post
    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.

  7. #7

    Default

    Quote Originally Posted by itwasnoteasy View Post
    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 :-)

  8. #8
    Sencha User jbird526's Avatar
    Join Date
    Jan 2008
    Location
    Westminster, MD
    Posts
    127

    Default Tab color change

    Quote Originally Posted by codeslinger View Post
    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.

  9. #9
    Sencha User jbird526's Avatar
    Join Date
    Jan 2008
    Location
    Westminster, MD
    Posts
    127

    Default Tab color change getting closer

    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
    Code:
    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
    Code:
    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

    Code:
    {"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"}
    ]}
    
    
    
    ]}

  10. #10
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    108

    Default

    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:

    Code:
    .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):
    Code:
    PHP Code:
    ... tabType"", setType: function( type ) {      var tabEl this.ownerCt.getTabElthis );      tabEl.removeClass"x-tab-" this.tabType );      if (typetabEl.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.
    --Chad Eberle
    Web Application Architect
    Pierce County Software Development
    Pierce County, Washington

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •