登录后，我希望将登录页面替换为仪表板页面，但出于某种原因，我无法更改卡片，因为我无法接受它会接受setActiveItem方法。< / p>
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'MainPanel'
],
name: 'MyApp',
controllers: [
'MainController'
],
launch: function() {
Ext.create('MyApp.view.MainPanel', {fullscreen: true});
}
});
MainController.js
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
alias: 'controller.mainController',
config: {
},
init: function(application) {
this.control({
'button[action=submitSigninemEmail]': {
tap: 'signinemEmailFnc'
}
});
},
signinemEmailFnc: function() {
var email_fld = Ext.getCmp('signinemEmail').getValue();
var password_fld = Ext.getCmp('signinemPassword').getValue();
var md5password = MD5(password_fld);
Ext.data.JsonP.request({
url: 'http://www.solumac.co.uk/clients/uwana/v2/ajax/sencha.php',
params: {
method: 'signinem',
callback: 'signinem',
email: email_fld,
password: md5password
},
callback: function(result, params) {
if (result === true) {
if (params.status === true){
console.log('signed in');
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
} else {
console.log(params.message);
}
}
}
});
}
});
MainPanel.js
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.Panel',
alias: 'widget.mainPanel',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
id: 'signinem',
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'signinemTitleBar',
title: 'Sign In',
items: [
{
xtype: 'button',
id: 'signinemButtonBack',
ui: 'back',
text: 'Back'
},
{
xtype: 'button',
align: 'right',
id: 'signinemButtonSignUp',
text: 'Sign Up'
}
]
},
{
xtype: 'container',
id: 'signinemPadding',
padding: 10,
width: '100%',
items: [
{
xtype: 'fieldset',
id: 'signinemFacebookSet',
title: 'Sign In with Facebook',
items: [
{
xtype: 'button',
id: 'signinemFacebook',
margin: 10,
width: '',
text: 'Facebook'
}
]
},
{
xtype: 'fieldset',
id: 'signinemEmailSet',
title: 'Sign In with Email',
items: [
{
xtype: 'textfield',
id: 'signinemEmail',
margin: 10,
label: 'email'
},
{
xtype: 'passwordfield',
id: 'signinemPassword',
margin: 10,
label: 'Password'
},
{
xtype: 'checkboxfield',
action: 'changeField',
id: 'signinemShow',
itemId: 'mycheckbox',
margin: 10,
label: 'show password',
labelWidth: '80%'
},
{
xtype: 'button',
action: 'submitSigninemEmail',
id: 'signinemSubmit',
margin: 10,
text: 'Submit'
}
]
}
]
}
]
},
{
xtype: 'container',
id: 'dashboard',
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
id: 'dashboardBar',
title: 'Dashboard'
}
]
},
listeners: [
{
fn: 'onSigninemShowCheck',
event: 'check',
delegate: '#signinemShow'
},
{
fn: 'onSigninemShowUncheck',
event: 'uncheck',
delegate: '#signinemShow'
}
]
},
onSigninemShowCheck: function(checkboxfield, e, options) {
alert('show password');
},
onSigninemShowUncheck: function(checkboxfield, e, options) {
alert('hide password');
}
});
我认为问题在于线......
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
......这不起作用，但已经完全删掉了应该替换它的内容。
答案 0 :(得分：0)
如果你改变了
Ext.create('MyApp.view.MainPanel', {fullscreen: true});
到
Ext.Viewport.add(Ext.create('MyApp.view.MainPanel'));
在您的app.js中，然后在您的控制器中更改
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
到
Ext.Viewport.setActiveItem(Ext.create('dashboard'),{
// other stuff
});
并将appboard添加到app.js中的views数组中我相信它应该可以正常工作
答案 1 :(得分：0)
您不能像上面那样只执行id字符串的setActiveItem：
MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'});
首先必须使用Ext.getCmp（）获取对组件的引用。
此外，MyApp.views.MainPanel是一个类名，而不是一个实例。您需要获取特定的实例对象，然后使用它来设置活动项。
以下是一些适合您的代码：
var mypanel = Ext.ComponentQuery('mainPanel')[0];
var active = Ext.getCmp('dashboard');
mypanel.setActiveItem(active, {type: 'slide', direction: 'left'});
我还包括一个可以满足您需求的文件应用程序：
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
alias: 'widget.mypanel',
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
handler: function(button, event) {
var comp = Ext.ComponentQuery.query('mypanel')[0];
var active = Ext.getCmp('c1');
comp.setActiveItem(active);
},
text: 'one'
},
{
xtype: 'button',
handler: function(button, event) {
var comp = Ext.ComponentQuery.query('mypanel')[0];
var active = Ext.getCmp('c2');
comp.setActiveItem(active);
},
text: 'two'
}
]
},
{
xtype: 'container',
html: 'Hello, first container',
id: 'c1'
},
{
xtype: 'container',
html: 'hello, second container',
id: 'c2'
}
]
}
});