javascript Sencha touch 2.0 无法在视口上设置活动项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8065505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sencha touch 2.0 can't set activeitem on viewport
提问by user1035654
I am playing with sencha touch 2.0 at the moment and i am having the following problem.
我目前正在玩 sencha touch 2.0，但遇到以下问题。
I am trying to set the activeitem on my viewport but according to my debug console the function is not being recognized. Yes my layout = card.
我试图在我的视口上设置活动项，但根据我的调试控制台，该功能未被识别。是的，我的布局 = 卡片。
Can someone please tell me how i can change my view !
有人可以告诉我如何改变我的看法！
Here's my code
这是我的代码
this is where it goed wrong :
这是出错的地方：
//THIS IS WHERE IT GOES WRONG
//这是哪里出错了
App.view.Viewport.setActiveItem("App.view.user.Index",{
type: "slide",
direction: "left"
});
i also tried
我也试过
this.App.view.Viewport.setActiveItem("App.view.user.Index",{
type: "slide",
direction: "left"
});
but that gives the same error: setActiveItem does not exist:
但这给出了相同的错误：setActiveItem 不存在：
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setActiveItem'
The rest of the code if needed : App.js
如果需要，其余代码：App.js
Ext.Loader.setConfig(
{
enabled: true ,
paths:{
//set application path
App: 'app'
}
});
// Main application entry point
Ext.application({
name: 'App',
//Define all models and controllers in the application
//Views do not have to be defined these are defined in the controllers
//Models
//Controllers
controllers: ['User'],
//automatically create a viewport(template) instance/object app/Viewport.js
autoCreateViewport: true,
launch: function() {
}
});
Viewport
视口
Ext.define('App.view.Viewport', {
extend: 'Ext.viewport.Default',
xtype: "Viewport",
config: {
fullscreen:true,
layout: "card",
items:[
{
xtype: "panel",
scrollable:true,
items: [
{
xtype:"toolbar",
title:"Test app"
},
{
xtype:"UserLoginView",
id: "LoginForm"
}
]
}
]
}
});
Controller where everything is happening
一切都在发生的控制器
//Define controller name
Ext.define('App.controller.User', {
//Extend the controller class
extend: 'Ext.app.Controller',
views: ['user.Login','user.Index'],
refs: [
{
selector:"#userLogin",
ref: 'LoginUserLogin'
},
{
selector:"#userPassword",
ref: "LoginUserPassword"
},
{
selector: "Viewport",
ref: "Viewport"
},
{
selector: "UserIndex",
ref: "UserIndex"
}
],
//define associated views with this controller
init: function()
{
//do something and setup listeners
//setup listeners
this.control({
'#UserLoginButon' : {
tap : this.login
}
});
},
//handle
login : function (object)
{
//iniate loading screen for user
var loadingScreen = new Ext.LoadMask(Ext.getBody(),{msg: ""});
loadingScreen.show();
//get form values
var username = this.getLoginUserLogin().getValue();
var password = this.getLoginUserPassword().getValue();
//check for empty fields
if(username == "" || password == "")
{
loadingScreen.hide();
Ext.Msg.alert("Foutmelding","Je dient alle velden in te vullen.");
}
else
{
Ext.Ajax.request(
{
url: '../backend/users/login/'+username+'/'+password,
method: 'post',
failure : function(response)
{
loadingScreen.hide();
data = Ext.decode(response.responseText);
Ext.Msg.alert('Login Error', data.errorMessage, Ext.emptyFn);
},
success: function(response, opts)
{
data = Ext.decode(response.responseText);
if (data == true)
{
loadingScreen.hide();
Ext.Msg.alert("ingelogd!","welkom");
//THIS IS WHERE IT GOES WRONG
App.view.Viewport.setActiveItem("App.view.user.Index",{
type: "slide",
direction: "left"
});
} else
{
loadingScreen.hide();
Ext.Msg.alert("Foutmelding","Gebruikersnaam of wachtwoord klopt niet.");
}
}
});
}
console.log(App);
},
loginRequest : function (username, password)
{
}
});
回答by Roberto
According this post at the Sencha Forum http://www.sencha.com/forum/showthread.php?150668-ExtJS4-to-ST2you shouldn't call Ext.Viewport directly in Sencha Touch 2, so I tried to create my own Viewport class and it worked, here's what I did:
根据 Sencha 论坛上的这篇文章http://www.sencha.com/forum/showthread.php?150668-ExtJS4-to-ST2你不应该在 Sencha Touch 2 中直接调用 Ext.Viewport，所以我试图创建我的自己的 Viewport 类并且它起作用了，这就是我所做的：
app.js
应用程序.js
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
controllers: ['MyController'],
autoCreateViewport: true,
launch: function() {
console.log('launch!');
}
});
view/Viewport.js
视图/Viewport.js
Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Container',
xtype: 'my-viewport',
config: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
},
fullscreen: true,
items: [{xtype: 'my-list'}, {xtype: 'my-detail'}]
}
});
controller/MyController.js
控制器/MyController.js
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
views: ['Navbar', 'List', 'Detail'],
init: function() {
console.log('MyController init');
this.control({
'button[go]': {
tap: function(btn) {
viewport = Ext.ComponentQuery.query('my-viewport');
target = Ext.ComponentQuery.query(btn.go);
viewport[0].setActiveItem(target[0]);
}
}
});
}
});
This controller will basically look for any button with the "go" parameter and setActiveItem() to that value, so you just have to tell the button to go to the xtype of your view, like this:
这个控制器基本上会寻找任何带有“go”参数和 setActiveItem() 到那个值的按钮，所以你只需要告诉按钮去你的视图的 xtype，像这样：
{
xtype: 'button',
text: 'detail view!',
go: 'my-detail',
width: '20%'
}
回答by stan229
You can't reference a panel by the class name, it's not referencing it's instance. Use your controller selectors or Ext.ComponentQuery.query(selector)(returns an array)
您不能通过类名引用面板，它不是引用它的实例。使用您的控制器选择器或Ext.ComponentQuery.query(selector)（返回一个数组）
You could (should? I did) do something like this:
你可以（应该？我做到了）做这样的事情：
var indexPanel = Ext.create('App.view.user.Index');
Ext.Viewport.add(indexPanel)
Ext.Viewport.setActiveItem(indexPanel)
