Сенча показать другую точку зрения на вкладке кнопки

Question

Я создал страницу индекса в сенче контакт 2, в котором я создал несколько пользовательских кнопок внутри контейнера

Ext.define('ov_app.view.Main', { 
extend: 'Ext.Container', 
requires:[ 
    'ov_app.view.Eligibelity', 
], 
xtype: 'main', 
css:[{ 
      "path": "default-theme.css", 
    }], 
config:{ 
    scrollable: true, 
    items: [ 
     {   xtype: 'panel', 
        margin:10, 
        items:[ 
         { 
          xtype:'button', 
          margin: '0 0 8 0', 
          cls:"main_navigation", 
          style:'background-color:#000', 
          action: 'push-view', 
         },{ 
          xtype:'button', 
          margin: '0 0 8 0', 
          cls:"main_navigation", 
         },{ 
          xtype:'button', 
          cls:"main_navigation", 
         } 
        ] 
      }] 
    } 
}); 

thees кнопка выглядит примерно так

при нажатии оранжевой кнопки я хочу отобразить новый вид.

Я пробовал просмотр ext.Navigation, но это не то, что я хочу. Должен ли я добавить слушатель событий для кнопки или я должен сделать что-то еще мольбу предложить

Я создал новый контроллер в папке контроллера main.js

Ext.define('ov_app.controller.Main', { 
extend: 'Ext.app.Controller', 
    config:{ 
     control: { 
      'button[action=push-view]': { 
       tap: 'pushViewFunction' 
      } 
     }, 
    }, 

pushViewFunction: function() { 
    Ext.Viewport.add({ 
     xtype: 'Eligibelity' 
    }); 
} 
}); 

и мой новый вид Eligibelity. JS код

` 
Ext.define('ov_app.view.Eligibelity', { 
    xtype : 'Eligibelity', 

    config: { 
     layout: 'vbox', 
     cls: 'big', 

     items: [ 
      { 
       xtype: 'title', 
       title: 'Twitter Search' 
      } 
     ] 
    } 
    }); 

` А также мой app.js код

` Ext.Loader.s etPath ({ 'Ext': 'touch/src', 'ov_app': 'app' });

Ext.application({ 
     name: 'ov_app', 

     requires: [ 
     'Ext.MessageBox' 
    ], 

views: ['Main', 'Eligibelity'], 
controllers: ['Main'], 

launch: function() { 
    // Destroy the #appLoadingIndicator element 
    Ext.fly('appLoadingIndicator').destroy(); 

    // Initialize the main view 
    Ext.Viewport.add(Ext.create('ov_app.view.Main')); 
}, 

onUpdated: function() { 
    Ext.Msg.confirm(
     "Application Update", 
     "This application has just successfully been updated to the latest version.  Reload now?", 
     function(buttonId) { 
      if (buttonId === 'yes') { 
       window.location.reload(); 
      } 
     } 
    ); 
} 
}); 

`

Answer 1

Вы можете добавить action к кнопке для справки:

{ 
    xtype: 'button', 
    action: 'push-view' 
} 

Тогда в контроллере, вы можете нажать новый вид, когда пользователь нажмите кнопку, как это:

control: { 
    'button[action=push-view]': { 
     tap: 'pushViewFunction' 
    } 
}, 

pushViewFunction: function() { 
    Ext.Viewport.add({ 
     xtype: 'newView' // This is the xtype of new view you want to push 
    }); 
} 

---

EDIT

Вам нужно положить y наш control внутри config блока:

config: {  
    control: { 
     'button[action=push-view]': { 
      tap: 'pushViewFunction' 
     } 
    } 
}, 

pushViewFunction: function() { 
    Ext.Viewport.add({ 
     xtype: 'newView' // This is the xtype of new view you want to push 
    }); 
} 

---

EDIT 2:

Вы можете использовать setActiveItem или animateActiveItem:

pushViewFunction: function() { 
    Ext.Viewport.animateActiveItem({xtype: 'Eligibelity'}, {type:'slide', direction: 'left'}); 
} 

Вот Working Demo на основе вашего всего опубликованного кода.

Answer 2

На кнопке вы должны добавить обработчик так:

{ 
xtype:'button', 
cls:"main_navigation", 
handler: function() { 
     Ext.create('Ext.window.Window', { 
      title: 'Works', 
      height: 300, 
      width: 300, 
      html: 'Create whatever view you want.' 
     }).show(); 
    } 
} 

Что вид вы хотите создать на кнопку мыши?

Редактировать: добавить show(), чтобы показать окно. Но вы можете делать какие-либо действия там.