Sencha touch 如何使用sencha中的视口从一个视图移动到另一个视图？
在我的应用程序中，我有一个带有topbar和一些字段的单视图。在这个按钮中，当我点击登录按钮时，我想移动到另一个视图（仪表板），它是一个选项卡视图。为此，我使用了viewport。但我无法从一种观点转移到另一种观点。这是我的密码： app.jsSencha touch 如何使用sencha中的视口从一个视图移动到另一个视图？,sencha-touch,sencha-touch-2,viewport,Sencha Touch,Sencha Touch 2,Viewport,在我的应用程序中，我有一个带有topbar和一些字段的单视图。在这个按钮中，当我点击登录按钮时，我想移动到另一个视图（仪表板），它是一个选项卡视图。为此，我使用了viewport。但我无法从一种观点转移到另一种观点。这是我的密码： app.js Ext.Loader.setConfig({ enabled : true }); Ext.application({ views : ['TitlePanel', 'dashboardpanel'], models : [ '
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
views : ['TitlePanel', 'dashboardpanel'],
models : [ 'MyModel', 'wishlistmodel' ],
stores : [ 'name', 'wishlistsummarystore' ],
name : 'MyApp',
controllers : [ 'MyController' ],
launch : function() {
var Login = {
xtype: 'login'
}
var Dashboard = {
xtype: 'dashboard'
}
Ext.Viewport.add([Login, Dashboard]);
}
});
Ext.define('MyApp.view.TitlePanel', {
extend: 'Ext.Panel',
alias: 'widget.login',
config: {
ui: 'light',
items: [
{
xtype: 'panel',
id: 'LoginScreen',
items: [
{
xtype: 'image',
docked: 'left',
height: 130,
id: 'Logoimage',
ui: '',
width: 170,
src: 'app/images/logo.png'
},
{
xtype: 'titlebar',
cls: 'mytitlebar',
docked: 'top',
height: 100,
ui: 'blue',
items: [
{
xtype: 'label',
height: 36,
html: 'Teritree Business Portal',
id: 'title',
margin: 20,
style: 'font: normal Bold 20px droid sans; color:#AB3951',
width: 396
}
]
},
{
xtype: 'panel',
id: 'LoginPanel',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: 'Login with Teritree Business Credentials',
id: 'Loginlabel',
margin: 20,
style: 'font: normal Bold 30px droid sans',
ui: 'dark'
},
{
xtype: 'fieldset',
height: 84,
itemId: 'LoginField',
margin: '40 0 0 0',
width: 500,
items: [
{
xtype: 'textfield',
id: 'user',
style: 'font: Droid Sans',
label: 'Login User id',
labelWidth: '40%'
},
{
xtype: 'textfield',
height: 35,
id: 'password',
label: 'Password',
labelWidth: '40%'
}
]
},
{
xtype: 'button',
height: 40,
id: 'LoginBtn',
margin: 20,
ui: 'orange',
width: 180,
text: 'Login'
},
{
xtype: 'label',
html: 'If you don\'t have an account yet: Signup at <a href="url">business.teritree.com</a> ',
id: 'signup',
margin: 20,
style: 'font: normal 24px droid sans'
}
]
}
]
}
]
}
});
Ext.define('MyApp.view.dashboardpanel', {
extend: 'Ext.Panel',
alias: 'widget.dashboard',
id:'dashboardpanel',
fullscreen: true,
tabBarDock: 'bottom',
items: [
mainWindow
]
});
var mainWindow = new Ext.Panel({
title:'main',
iconCls:'home',
layout:'fit',
scroll: 'vertical',
dockedItems: [toolbar,bigButton]
});
var bigButton = new Ext.Button({
dock: 'bottom',
text: 'I should be at the bottom'
});
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Main',
items: [
{
text: 'Reload',
}
]
});
Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
LoginScreen : '#Login',
dashboardscreen : '#dashboardpanel'
},
control : {
"#LoginBtn" : {
tap : 'onLoginButtonTap'
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
onLoginButtonTap : function(button, e, options) {
Ext.Viewport.animateActiveItem(Dashboard, this.slideLeftTransition);
}
});
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
views : ['TitlePanel', 'dashboardpanel'],
models : [ 'MyModel', 'wishlistmodel' ],
stores : [ 'name', 'wishlistsummarystore' ],
name : 'MyApp',
controllers : [ 'MyController' ],
launch : function() {
var Login = {
xtype: 'login'
}
var Dashboard = {
xtype: 'dashboard'
}
Ext.Viewport.add([Login, Dashboard]);
}
});
Ext.define('MyApp.view.TitlePanel', {
extend: 'Ext.Panel',
alias: 'widget.login',
config: {
ui: 'light',
items: [
{
xtype: 'panel',
id: 'LoginScreen',
items: [
{
xtype: 'image',
docked: 'left',
height: 130,
id: 'Logoimage',
ui: '',
width: 170,
src: 'app/images/logo.png'
},
{
xtype: 'titlebar',
cls: 'mytitlebar',
docked: 'top',
height: 100,
ui: 'blue',
items: [
{
xtype: 'label',
height: 36,
html: 'Teritree Business Portal',
id: 'title',
margin: 20,
style: 'font: normal Bold 20px droid sans; color:#AB3951',
width: 396
}
]
},
{
xtype: 'panel',
id: 'LoginPanel',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: 'Login with Teritree Business Credentials',
id: 'Loginlabel',
margin: 20,
style: 'font: normal Bold 30px droid sans',
ui: 'dark'
},
{
xtype: 'fieldset',
height: 84,
itemId: 'LoginField',
margin: '40 0 0 0',
width: 500,
items: [
{
xtype: 'textfield',
id: 'user',
style: 'font: Droid Sans',
label: 'Login User id',
labelWidth: '40%'
},
{
xtype: 'textfield',
height: 35,
id: 'password',
label: 'Password',
labelWidth: '40%'
}
]
},
{
xtype: 'button',
height: 40,
id: 'LoginBtn',
margin: 20,
ui: 'orange',
width: 180,
text: 'Login'
},
{
xtype: 'label',
html: 'If you don\'t have an account yet: Signup at <a href="url">business.teritree.com</a> ',
id: 'signup',
margin: 20,
style: 'font: normal 24px droid sans'
}
]
}
]
}
]
}
});
Ext.define('MyApp.view.dashboardpanel', {
extend: 'Ext.Panel',
alias: 'widget.dashboard',
id:'dashboardpanel',
fullscreen: true,
tabBarDock: 'bottom',
items: [
mainWindow
]
});
var mainWindow = new Ext.Panel({
title:'main',
iconCls:'home',
layout:'fit',
scroll: 'vertical',
dockedItems: [toolbar,bigButton]
});
var bigButton = new Ext.Button({
dock: 'bottom',
text: 'I should be at the bottom'
});
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Main',
items: [
{
text: 'Reload',
}
]
});
Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
LoginScreen : '#Login',
dashboardscreen : '#dashboardpanel'
},
control : {
"#LoginBtn" : {
tap : 'onLoginButtonTap'
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
onLoginButtonTap : function(button, e, options) {
Ext.Viewport.animateActiveItem(Dashboard, this.slideLeftTransition);
}
});
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
views : ['TitlePanel', 'dashboardpanel'],
models : [ 'MyModel', 'wishlistmodel' ],
stores : [ 'name', 'wishlistsummarystore' ],
name : 'MyApp',
controllers : [ 'MyController' ],
launch : function() {
var Login = {
xtype: 'login'
}
var Dashboard = {
xtype: 'dashboard'
}
Ext.Viewport.add([Login, Dashboard]);
}
});
Ext.define('MyApp.view.TitlePanel', {
extend: 'Ext.Panel',
alias: 'widget.login',
config: {
ui: 'light',
items: [
{
xtype: 'panel',
id: 'LoginScreen',
items: [
{
xtype: 'image',
docked: 'left',
height: 130,
id: 'Logoimage',
ui: '',
width: 170,
src: 'app/images/logo.png'
},
{
xtype: 'titlebar',
cls: 'mytitlebar',
docked: 'top',
height: 100,
ui: 'blue',
items: [
{
xtype: 'label',
height: 36,
html: 'Teritree Business Portal',
id: 'title',
margin: 20,
style: 'font: normal Bold 20px droid sans; color:#AB3951',
width: 396
}
]
},
{
xtype: 'panel',
id: 'LoginPanel',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'label',
html: 'Login with Teritree Business Credentials',
id: 'Loginlabel',
margin: 20,
style: 'font: normal Bold 30px droid sans',
ui: 'dark'
},
{
xtype: 'fieldset',
height: 84,
itemId: 'LoginField',
margin: '40 0 0 0',
width: 500,
items: [
{
xtype: 'textfield',
id: 'user',
style: 'font: Droid Sans',
label: 'Login User id',
labelWidth: '40%'
},
{
xtype: 'textfield',
height: 35,
id: 'password',
label: 'Password',
labelWidth: '40%'
}
]
},
{
xtype: 'button',
height: 40,
id: 'LoginBtn',
margin: 20,
ui: 'orange',
width: 180,
text: 'Login'
},
{
xtype: 'label',
html: 'If you don\'t have an account yet: Signup at <a href="url">business.teritree.com</a> ',
id: 'signup',
margin: 20,
style: 'font: normal 24px droid sans'
}
]
}
]
}
]
}
});
Ext.define('MyApp.view.dashboardpanel', {
extend: 'Ext.Panel',
alias: 'widget.dashboard',
id:'dashboardpanel',
fullscreen: true,
tabBarDock: 'bottom',
items: [
mainWindow
]
});
var mainWindow = new Ext.Panel({
title:'main',
iconCls:'home',
layout:'fit',
scroll: 'vertical',
dockedItems: [toolbar,bigButton]
});
var bigButton = new Ext.Button({
dock: 'bottom',
text: 'I should be at the bottom'
});
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Main',
items: [
{
text: 'Reload',
}
]
});
Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
LoginScreen : '#Login',
dashboardscreen : '#dashboardpanel'
},
control : {
"#LoginBtn" : {
tap : 'onLoginButtonTap'
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
onLoginButtonTap : function(button, e, options) {
Ext.Viewport.animateActiveItem(Dashboard, this.slideLeftTransition);
}
});
我建议您为此使用
Ext.navigation.ViewExt.Viewport.setActiveItem(1);
PS：请注意视口的情况。嘿@Arindam刚刚像这样放入MyController文件
Ext.define('myapp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
LoginScreen: '#Login',
dashboardscreen : '#Dashboard'
},
control : {
"#LoginBtn": {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function(button, e, options) {
Ext.getCmp('dashboardpanel').show('slide', true)
Ext.getCmp('loginpanel').hide()
}
});
嘿，我终于能解决这个问题了。因为我在控制器中给出了错误的引用。以下是控制器代码：
Ext.define('MyApp.controller.MyController', {
extend : 'Ext.app.Controller',
config : {
refs : {
TitlePanel : 'login',
dashboardpanel : 'dashboard'
},
views : [
'TitlePanel',
'dashboardpanel'
],
control : {
"#LoginBtn" : {
tap : 'onLoginButtonTap'
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
onLoginButtonTap : function(button, e, options) {
Ext.Viewport.setActiveItem(this.getDashboardpanel(), this.slideLeftTransition);
}
})) 你能修改代码并给我…吗？因为我尝试了导航视图，但没有成功。我编辑了我的问题。现在我没有得到任何错误。我添加了一个viewport.js类。并试图在上面显示屏幕。但它给了我白色的屏幕。我错在哪里？我更改了app.js..现在它来了。但在app.js中，我必须写下所有视图的名称，对吗？？现在我如何移动到仪表板屏幕..使用您的代码，这是可能的。现在我向您展示了您必须在哪里更改控制器。请看看我的控制器。只有你的
dashboardpanel.jshttp://your_ip:your_port/your_project_name/your_app_nameExt.getCmp（idPanelMain）.setActiveItem（Ext.getCmp（idPanelShow），{type:'slide'，direction:'right'}）