Results 1 to 8 of 8

Thread: Tab Panel add tool icon in top

  1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    130
    Vote Rating
    0
      0  

    Default Tab Panel add tool icon in top

    Hello, I need to add an "trash can" on my tab panel, can I do that?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Are you looking for the 'iconCls' config option?

    Or for the 'tools' config option (which is unfortunately not supported by TabPanel).

  3. #3
    Ext User
    Join Date
    Oct 2008
    Posts
    130
    Vote Rating
    0
      0  

    Default

    I just looked at 'iconCls', and think it's mabye what I needs.
    Can I make an action on it, when I click on it?

  4. #4
    Ext User
    Join Date
    Oct 2008
    Posts
    130
    Vote Rating
    0
      0  

    Default

    Is 'iconCls' not only to set an specified class on my tabs?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Yes, iconCls adds a class to the tab and the CSS class should contain a background image.

  6. #6
    Ext User
    Join Date
    Oct 2008
    Posts
    130
    Vote Rating
    0
      0  

    Default

    So I have to add an tab with iconCls on, (background image) and so on the tab set the eventhandler?

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    That would be an option.

    Or you could modify TabPanel to support the tools config option.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    Example:
    Code:
    Ext.override(Ext.TabPanel, {
    	doLayout: function(){
    		Ext.TabPanel.superclass.doLayout.apply(this, arguments);
    		this.stripWrap.dom.style.width = (this.stripWrap.dom.parentNode.offsetWidth - this.toolOffset) + 'px';
    	}
    });
    Ext.onReady(function(){
    	var p = new Ext.TabPanel({
    		toolOffset: 53,
    		tools: [
    			{id: 'minimize'},
    			{id: 'maximize'},
    			{id: 'close'}
    		],
    		height: 200,
    		width: 400,
    		activeTab: 0,
    		items: [{
    			title: 'Tab 1'
    		},{
    			title: 'Tab 2'
    		}],
    		renderTo: document.body
    	});
    });

Posting Permissions

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