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
});
}
},
Excellent answer but beware that calling setActiveItem() with just an xtype will create new views instead of reusing the ones that are already created, I ended up using Ext.ComponentQuery
to get the target first and then setActiveItem on that, here's the code:
this.control({
'button[go]': {
tap: function(btn) {
viewport = Ext.ComponentQuery.query('my-custom-viewport-xtype');
target = Ext.ComponentQuery.query(btn.go);
viewport[0].setActiveItem(target[0]);
}
}
});
Also note that I use a custom viewport to add slide effects and such, but calling directly Ext.Viewport.setActiveItem()
like the previous example will work as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With