setactiveitem работает только один раз

Question

моя проблема в том, что у меня есть 3 файла вида и один контроллер.

Ниже приведен код для событий с тремя нажатиями кнопок.

onb1:function(){ 

    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); 

    Ext.Viewport.add({xtype:'second',height:'30%',style:'background:red'}).show(); 

}, 

onb3:function(){ 

    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); 

    Ext.Viewport.add({xtype:'main'}).show(); 

}, 

onb2:function(){ 

    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); 

    Ext.Viewport.add({xtype:'third',height:'60%',style:'background:orange'}).show(); 

} 

это работает только один раз.

скажите мне какое-либо решение ...

Answer 1

activeItem автоматически устанавливается в первый раз. После этого вы должны установить его самостоятельно. Также нет необходимости вызывать show(). Должно работать так:

Ext.Viewport.add(someView);  
    Ext.Viewport.setActiveItem(someView); 

Answer 2

Причина заключается в том, эта строка кода:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);

удалит свой компонент, а затем уничтожить его.

Возможно, вы определили свои обработчики таким образом, чтобы они были привязаны к этим компонентам только по определению, а не по инициализации.

Итак, если вы не объявляете функцию обработчика в методе initialize компонентов, которые вы часто добавляете/удаляете.

Говорит ваши компоненты кнопка, так что ваши файлы определение должны выглядеть следующим образом:

Ext.define('mybutton',{ 
    extend: 'Ext.Button', 
    config: { 
     text: 'my button' 
    }, 
    initialize: function(){ 
     var me = this; 
     this.addListener({ 
      fn: me.doSmt, 
      event: 'tap' 
     }); 
    } 
    doSmt: function(){ 
     // implement your logics here....... 
    } 
});