Javascript 切换&；senchatouch动画

我试着在点击按钮时切换一个上下滑动的图像。当我点击扩展器按钮时 顶部以下应减少

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

$（函数（）{
$（“#legendExpand”）.toggle（函数（）{
$（“#图例”）.animate（{'top'：“370px”}）；
$（“div#legendExpand”）.html（“”）；
}，函数（）{
$（“#图例”）.animate（{'top'：“285px”}）；
$（“div#legendExpand”）.html（“”）；
});
});

我不知道如何使用sencha touch实现它

我能够检测到点击事件，如下所示

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

var图例=新的外部面板({
id:“legendPanel”，
html:“可用性：标准颜色高对比度色盲（红色/绿色）色盲（蓝色/黄色）
键：

停车设施，
听众：{
“afterrender”：函数（）{
Ext.getCmp（'legendPanel'）.getEl（）.on（'click'，函数（e，t）{
e、 stopEvent（）；
}，null，{delegate:'img.expanderImage'}）；
}
}
});

试试：

this.hide（）；这个。销毁（）；这个是doLayout（）

以上内容将隐藏图例组件。然后，您可以使用正确的扩展器图像更新html（您需要在doLayout之前执行此操作，因为这会强制重新绘制）

您也可以将legendPanel称为
this
，而不是使用Ext.getCmp（）