PDA

View Full Version : toggle & animation



pkvenu
27 Jan 2012, 4:58 PM
I am trying to toggle a image on button click which slides up and down. When i click on the expander button
below the top should be reduced.

In Jquery I use some thing like this to achieve the desired result.


$(function() {
$("#legendExpand").toggle(function() {
$("#legend").animate({'top': "370px"});
$("div#legendExpand").html('<img src="img/expander-up.png" width="27" height="27"/>');
}, function() {
$("#legend").animate({'top': "285px"});
$("div#legendExpand").html('<img src="img/expander-down.png" width="27" height="27"/>');
});
});

I am not sure how to achieve it using sencha touch.

I am able to detect the click event as shown below.

var legend = new Ext.Panel({
id: 'legendPanel',
html: '<div id="legend"><div id="legendExpand" class="legendExpand"><img class="expanderImage" src="resources/images/expander-down.png" width="27" height="27"/></div><div class="clear"></div><div id="layerOne"><div class="section">Availability:</div><div class="section" id="key"><div id="colorKey" class="dropUp"><div class="top"><div class="colorLink">Standard Colors</div><div class="clear"></div><div class="divider"></div><div class="colorLink">High Contrast</div><div class="clear"></div><div class="divider"></div><div class="colorLink">Color Blind (Red/Green)</div><div class="clear"></div><div class="divider"></div><div class="colorLink">Color Blind (Blue/Yellow)</div><div class="clear"></div><div class="divider"></div></div><!-- END top --><div class="bottom"><div class="standardColors"><img src="resources/images/standardColors.png" width="129" height="29" /></div><div class="clear"></div></div><!-- END bottom --></div><!-- END colorKey --><!--<div id="changeColorsLink"><a href="#"><strong>Change Colors</strong></a></div> END changeColorsLink --></div><!-- END section --><div class="clear"></div><div class="dotted"></div><div id="layerTwo"><ul class="legend"><li>Key:</li><li><img src="resources/images/legend_P.png" width="22" height="34" /></li><li>Parking<br />Facilities</li><li><img src="resources/images/legend_PR.png" width="33" height="34"/></li><li>Park &amp; Ride<br />Facility</li><li><img src="resources/images/legend_SP.png" width="27" height="34" /></li><li>Street<br />Parking</li></ul></div><div class="clear"></div></div><!-- END layerOne --></div>',
listeners: {
'afterrender': function () {
Ext.getCmp('legendPanel').getEl().on('click', function (e, t) {
e.stopEvent();


}, null, { delegate: 'img.expanderImage' });
}
}
});

31094

Thanks,
Pawan