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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar