переключение и анимация в сенсорном Сенча - PullRequest
Новая
       0

переключение и анимация в сенсорном Сенча

1 голос
/ 30 января 2012

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

Я не уверен, как этого добиться, используя 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' });
        }
    }
    });

1 Ответ

0 голосов
/ 13 марта 2012

Попробуйте:

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

Выше будет скрыт компонент легенды. Затем вы можете обновить html, указав правильное изображение расширителя (вы должны сделать это до doLayout, поскольку это вызывает перерисовку).

Вы также можете ссылаться на legendPanel как this вместо использования Ext.getCmp ().

...