Sencha Touch 2 MVC-如何使用按钮切换视图 [英] Sencha Touch 2 MVC - how to switch views with button
本文介绍了Sencha Touch 2 MVC-如何使用按钮切换视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个控制器:
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() {
}
}
});
}
});
和这两个视图:
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() {
}
}
]
}
});
我希望当我单击第一个按钮时加载第二个视图,当我单击第二个按钮时反之亦然。似乎我既可以在按钮处理程序中添加代码,也可以在控件部分中添加代码--我希望两者都有一个例子(除非它们是相同的),并可能解释一下哪种方法最好以及为什么。
注意,我不想使用卡片布局或选项卡面板-我想知道如何从一个独立视图切换到另一个(在我的应用程序中,我有一个卡片面板和一个选项卡Pabel,我需要使用按钮在这两个组之间切换)
谢谢!!
推荐答案
应该在控制器中使用this.control
而不是处理程序:
this.control({
'#first': {
tap: function() {
Ext.Viewport.add({
xtype: 'testsecond'
});
}
},
(您可以从视图定义中的按钮拖出handlers:
)
另外,您可能一开始就不应该对ID进行硬编码。
我这样处理按钮的方式是:
items: [
{
xtype: 'button',
ui: 'normal',
text: 'Go To First Screen',
go: 'testsecond'
},
...
然后在应用于所有视图的基本控制器中,我执行如下操作:
this.control({
'button[go]': {
tap: function(btn) {
Ext.Viewport.setActiveItem({
xtype: btn.go
});
}
},
这篇关于Sencha Touch 2 MVC-如何使用按钮切换视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文