Results 1 to 7 of 7

Thread: How to change Dom struture of Ext.button.Button through Custom template in ExtJS 4?

  1. #1

    Default Answered: How to change Dom struture of Ext.button.Button through Custom template in ExtJS 4?

    Hi,

    My requirement is I don't want the default CSS classes to get applied for Ext Button, when I hover, click on the button. I may want to use image or a custom css properties, but I don't want default styling provided b ExtJs 4.

    Can any one please suggest a good way to do so ?
    I am not able to find such example in documentation.

    I will be of help if you can provide a working example of a Button.

    Thanks in Advance !

    Abhishek Kanitkar

  2. Css:
    Code:
    .my span.x-btn-inner {
        color: red !important;
    }
    
    .my:hover span.x-btn-inner {
        color: blue !important;
    }
    http://jsfiddle.net/zVX8T/2/

  3. #2
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

    Default

    Extend button:
    Code:
    Ext.define('Ext.ux.button.MyButton', {
        extend: 'Ext.button.Button',
        alias: 'widget.mybutton',
    // override tpl below
        renderTpl: [
            '<em id="{id}-btnWrap"<tpl if="splitCls"> class="{splitCls}"</tpl>>',
                '<tpl if="href">',
                    '<a id="{id}-btnEl" href="{href}" class="{btnCls}" target="{hrefTarget}"',
                        '<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl>',
                        '<tpl if="disabled"> disabled="disabled"</tpl>',
                        ' role="link">',
                        '<span id="{id}-btnInnerEl" class="{baseCls}-inner">',
                            '{text}',
                        '</span>',
                        '<span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}"<tpl if="iconUrl"> style="background-image:url({iconUrl})"</tpl>></span>',
                    '</a>',
                '<tpl else>',
                    '<button id="{id}-btnEl" type="{type}" class="{btnCls}" hidefocus="true"',
                        // the autocomplete="off" is required to prevent Firefox from remembering
                        // the button's disabled state between page reloads.
                        '<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl>',
                        '<tpl if="disabled"> disabled="disabled"</tpl>',
                        ' role="button" autocomplete="off">',
                        '<span id="{id}-btnInnerEl" class="{baseCls}-inner" style="{innerSpanStyle}">',
                            '{text}',
                        '</span>',
                        '<span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}"<tpl if="iconUrl"> style="background-image:url({iconUrl})"</tpl>></span>',
                    '</button>',
                '</tpl>',
            '</em>',
            '<tpl if="closable">',
                '<a id="{id}-closeEl" href="#" class="{baseCls}-close-btn" title="{closeText}"></a>',
            '</tpl>'
        ]
    });
    And use:
    Code:
    {
        xtype: 'mybutton',
        text: 'My Button'
    }
    Last edited by redraid; 21 Aug 2012 at 10:23 PM. Reason: fix

  4. #3

    Default

    Thanks for your quick reply, but I got Type error : item is null error.
    I only want to use simple css rules like background-color, color, font size for the button & on mouse hover I don't want to change anything. So can you please tell me how can I override the above template.
    Can you please provide CSS classes for example ?
    Also from where can I learn more about using templates effectively ?

  5. #4
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

    Default

    You can use cls config and write own css rules:
    js
    Code:
    Ext.create('Ext.Button', {
        cls: 'my',
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            alert('You clicked the button!');
        }
    });
    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            alert('You clicked the button!');
        }
    });
    css
    Code:
    .my:hover {
        width: 100px !important;
    }
    ?
    live example http://jsfiddle.net/zVX8T/1/

  6. #5

    Default

    In your example on jsfiddle if I want to change font color of the button text, then I am not able to do it using cls config.
    Can you please add renderTpl to your jsfiddle example & show how it's done actually ?
    Thanks !!!

  7. #6
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44

    Default

    Css:
    Code:
    .my span.x-btn-inner {
        color: red !important;
    }
    
    .my:hover span.x-btn-inner {
        color: blue !important;
    }
    http://jsfiddle.net/zVX8T/2/

  8. #7

    Default

    Hey Thanks a lot Redraid !!!
    I didn't get it before.
    I may not have explained it well before, but this is exactly what I wanted.
    I think it will be helpful to many.
    Thanks for your quick reply.

Tags for this Thread

Posting Permissions

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