첸차 터치로 토글 & 애니메이션

enter image description here 위아래로 움직이는 버튼 클릭으로 이미지를 전환하려고합니다. 익스 팬더 버튼을 클릭하면 아래의 이 줄어 듭니다.첸차 터치로 토글 & 애니메이션

Jquery에서는 원하는 결과를 얻기 위해이 같은 것을 사용합니다.

$(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"/>'); 
    }); 
});

나는 그것을 사용하여 달성 방법을 잘 모르겠다.

다음과 같이 클릭 이벤트를 감지 할 수 있습니다.

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

출처

2012-01-30 Pawan

시도 :

this.hide(); this.destroy(); this.doLayout();

위의 범례 구성 요소를 숨 깁니다. 그런 다음 올바른 확장기 이미지로 html을 업데이트 할 수 있습니다 (이 작업은 다시 그리기를 강제하기 때문에 doLayout 전에 수행해야 할 것입니다).

Ext.getCmp()를 사용하는 대신 legendPanel을 this으로 참조 할 수도 있습니다.

출처

2012-03-13 17:34:09

첸차 터치로 토글 & 애니메이션

답변

관련 문제