I have this controller:
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
config: {
},
refs: [
{
ref: 'first',
selector: '#first'
},
{
ref: 'second',
selector: '#second'
}
],
views : [
'TestMain',
'TestSecond'
],
init: function() {
this.getTestMainView().create();
this.control({
'#first': {
tap: function() {
//how do I go to second view here?
}
},
'#second': {
tap: function() {
}
}
});
}
});
and these 2 views:
Ext.define('MyApp.view.TestMain', {
extend: 'Ext.Container',
xtype: 'testmain',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
ui: 'normal',
id: 'first',
text: 'Go To Second Screen',
handler: function() {
//how do I go to second view here?
}
}
]
}
});
...
Ext.define('MyApp.view.TestSecond', {
extend: 'Ext.Container',
xtype: 'testsecond',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
ui: 'normal',
id: 'second',
text: 'Go To First Screen',
handler: function() {
}
}
]
}
});
I would like the second view to load when I click on first button and vice versa when I click on second button. It seems I can add code either in my button handler or in the control section - I would appreciate an example of both (unless they are the same) and maybe an explanation as to which method is best and why.
Note that I do NOT want to use card layout or tabpanel - I want to know how to switch from one standalone view to another (In my app I have a card panel and a tab pabel and I need to switch between both groups using buttons)
Thanks!!
Instead of the handlers, you should use this.control
in the controller:
this.control({
'#first': {
tap: function() {
Ext.Viewport.add({
xtype: 'testsecond'
});
}
},
(you can drop the handlers:
from the button in the view definition)
Also, you probably shouldn't hard-code ids in the first place.
The way I handle buttons like this is:
items: [
{
xtype: 'button',
ui: 'normal',
text: 'Go To First Screen',
go: 'testsecond'
},
...
Then in a base controller that applies to all views, I do something like:
this.control({
'button[go]': {
tap: function(btn) {
Ext.Viewport.setActiveItem({
xtype: btn.go
});
}
},