View Full Version : Lists, itemTpls and buttons

21 Jul 2011, 7:07 AM
Hello to everyone,

I have a List object with a custom XTemplate definition containing css styled HTML buttons. While I'm able to respond to click events, I'm UNABLE to switch the button's custom css class for the buttons press and release states. I want to do this to give the user visual feedback. Below is a snippet of the js and css code:


this.itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<table width="100%" border="0">',
'<td width="60">',
'<input type="button" id="btnTest" class="btn_green" value="Test"/>',

.btn_green {
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
text-align: right;
padding-right: 5px !important;
padding-top: 7px !important;
width: 60px;
height: 32px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.13, rgb(106,150,4)), color-stop(0.57, rgb(131,185,5)));
border-color: #263501;
border-width: thin;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;

.btn_green:activate {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgb(131,184,6)), color-stop(0.5, rgb(105,148,5)));

21 Jul 2011, 7:18 AM
Did you try adding in click events to the XTemplate's button?


onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"

21 Jul 2011, 7:26 AM
My only complaint is that the handleMDown(), handleMUp() and displaymessage() functions will have to be global rather than members of the 'class' that the List object resides in. There must be a better approach, no?

21 Jul 2011, 8:00 AM
You can try initializing the new values of the component right inside the event handler:


As far as I know, the event handlers can only handle JS functions and CSS cannot perform JS. I don't know much about CSS event handlers but take a look at this page:


Maybe it can help out a bit.

23 Jul 2011, 8:52 AM
But iOS and Android don't recognize onMouseDown() and onMouseUp()!