PDA

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



thephonegapguy
21 Aug 2012, 6:58 PM
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

redraid
21 Aug 2012, 10:20 PM
Extend button:


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:


{
xtype: 'mybutton',
text: 'My Button'
}

thephonegapguy
22 Aug 2012, 12:39 AM
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 ?

redraid
22 Aug 2012, 1:13 AM
You can use cls config and write own css rules:
js


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


.my:hover {
width: 100px !important;
}
?
live example http://jsfiddle.net/zVX8T/1/

thephonegapguy
22 Aug 2012, 2:27 AM
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 !!!

redraid
22 Aug 2012, 4:29 AM
Css:


.my span.x-btn-inner {
color: red !important;
}

.my:hover span.x-btn-inner {
color: blue !important;
}


http://jsfiddle.net/zVX8T/2/

thephonegapguy
22 Aug 2012, 10:21 AM
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.