1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    ratishsp is on a distinguished road

      0  

    Default Answered: Customize icon on Ext.panel.Tool

    Answered: Customize icon on Ext.panel.Tool


    Hi,
    I wish to replace icon on Ext.panel.Tool with a custom icon.
    I didnt find any method on Ext.panel.Tool for the same.
    On going through the source code of Tool.js, I found the below snippet which paints the image.

    Code:
    renderTpl: ['<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
    When defining my tools config, I replaced the renderTpl to point to the custom icon. Please let me know if the approach taken is fine.

    Code:
    	       itemId: 'prev',
    	       type: 'prev',
    	       renderTpl: ['<img id="{id}-toolEl" src="http://example.com/abc.jpg" class="{baseCls}-{type}" role="presentation"/>'],
    		   qtip: 'back'
    I am using ExtJS 4.0.2

    Regards,
    Ratish

  2. If possible you should move the image URL out to a stylesheet. You should be able to add a custom tool type just by using a type value that isn't already defined, then specifying suitable CSS rules to render the image. There shouldn't be any need to change the template.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    If possible you should move the image URL out to a stylesheet. You should be able to add a custom tool type just by using a type value that isn't already defined, then specifying suitable CSS rules to render the image. There shouldn't be any need to change the template.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    33
    Answers
    1
    Vote Rating
    0
    near is on a distinguished road

      0  

    Default


    Hi,
    Also have the same concern, but I am wondering how to apply that suitable CSS rule, I mean on which selector ? does the definition of the custom type automatically define a classe or an identifier with the same name ?

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    0
    ratishsp is on a distinguished road

      0  

    Default


    It works.

    To answer 'near', following worked for me
    Code:
    	       itemId: 'home',
    	       type: 'home',
    	       cls:'abc-tool-home',
    	       qtip: 'Back to Home'
    css
    Code:
    .abc-tool-home .x-tool-home{
    	background-image:url(abc-home.png);
    }

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    33
    Answers
    1
    Vote Rating
    0
    near is on a distinguished road

      0  

    Default


    yeah it works ! thx !

Thread Participants: 2