PDA

View Full Version : Lists, itemTpls and buttons



mrtedweb
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:

JavaScript:


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


.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)));
}

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

examples:

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

mrtedweb
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?

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

example:
onclick="document.bgColor='lightblue'

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:

http://www.webdeveloper.com/forum/showthread.php?t=170545

Maybe it can help out a bit.

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