如何使用sencha中的视口从一个视图移动到另一个视图? [英] How to move from one view to another view using viewport in sencha?
本文介绍了如何使用sencha中的视口从一个视图移动到另一个视图?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的应用程序中，我有一个带有顶栏和一些字段的单一视图.在这个按钮中，当我单击登录按钮时，我想移动到另一个视图(仪表板)，它是一个 tabview.所以为此我使用视口.但我无法从一种观点转移到另一种观点.这是我的代码:
In my application I have a one view with topbar and some fields. In this button when I am click the login button I want to move to another view (Dashboard) which is a tabview. So for this I am using viewport. But I am unable to move from one view to another. Here is my code:
app.js
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]);
}
});
Titlepanel.js
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'
}
]
}
]
}
]
}
});
dashboardpanel.js
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',
}
]
});
MyContrller.js
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);
}
});
推荐答案
嘿，我终于能够解决这个问题了.因为我在控制器中给出了错误的引用..这是控制器代码:
Hey i am able to solve this problem finally. Because iwas giving wrong references in controller..here is the controller code:
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);
}
});
这篇关于如何使用sencha中的视口从一个视图移动到另一个视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
