I am playing with sencha touch 2.0 at the moment and i am having the following problem.
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:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setActiveItem'
The rest of the code if needed : 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)
{
}
});
I am playing with sencha touch 2.0 at the moment and i am having the following problem.
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:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setActiveItem'
The rest of the code if needed : 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)
{
}
});
2 Answers
Reset to default 2According this post at the Sencha Forum http://www.sencha./forum/showthread.php?150668-ExtJS4-to-ST2 you 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:
app.js
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
controllers: ['MyController'],
autoCreateViewport: true,
launch: function() {
console.log('launch!');
}
});
view/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
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:
{
xtype: 'button',
text: 'detail view!',
go: 'my-detail',
width: '20%'
}
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)
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)
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744853158a4597248.html
评论列表（0条）