PDA

View Full Version : ExtJS 4.2 - MVC, Change Classes after Login ?



terra75
19 Feb 2014, 6:34 AM
Hallo,

ich schreibe einfach mal auf Deutsch, da ich Englisch jetzt nicht so besonders kann.

Zu meiner Sache:
Habe mir schon einige Tutorials angeschaut, wie man mit ExtJS4 eine anständige MVC Struktur erstellt. So weit, so gut. Ich habe mir überlegt ein Panel zu erstellen, wo man seine Logindaten eingeben kann (bereits erledigt) und bei erfolgreichem Login das Panel mit anderen ausgetauscht werden soll. Alle Store Daten sollen dann aufgrund der Logindaten dann in die neuen Panels geladen werden.

[Google Translate:]
To my point:
I've already looked at some tutorials how to create with ExtJS4 a decent MVC structure. So far, so good. I've been thinking a panel to create, where you can enter his login data (already done) and upon successful login, the panel is to be replaced with others. All store data to be loaded into the new panel because the login data.

Ich habe es bis jetzt so gelöst, das ich im Viewport.js alle Classen eingetragen haben, die für das Login angezeigt werden sollen:

[Google Translate:]
I've had it up now solved so that I have entered all the classes in Viewport.js that should be displayed for the login:

Ext.define('IOS.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
requires:[
'IOS.language.Default',

'IOS.view.default.Top',
'IOS.view.default.Bottom',
'IOS.view.default.Center'
],

layout : 'border',

items: [{
region: 'north',
xtype: 'top'
}, {
region: 'center',
xtype: 'center'
}, {
region: 'south',
xtype: 'bottom'
}]
});


Jetzt soll aber nach dem erfolgreichem Login der "Center" Bereich mit einer anderen Klasse ausgetauscht werden. Ich habe aber keine Ahnung, wie das gehen soll.

[Google Translate:]
But after successful login, the "Center" area should now be replaced with another class. But I have no idea how this will go.

LoginController.js:

Ext.define('IOS.controller.LoginController', {
extend : 'Ext.app.Controller',

onLoginButtonClick : function (button, e, options) {
if (button.up('form').getForm().isValid()) {
button.up('form').getForm().submit({
url : 'resources/php/shop.store.php',
method : 'POST',
params : {
type : 'login',
//username : username,
//password : password
},
success : function (form, action) {
Ext.Msg.alert('Login Successful!');
},
failure : function (form, action) {
Ext.Msg.alert('Login Failed!', action.response.responseText);
}
});
}
},

init : function () {
this.control({
'#LoginButton' : {
click : this.onLoginButtonClick
}
});
}

});
Ich weis, das es bei success eingetragen werden muss, aber ich weis nicht was.
Könnte mir da jemand behilflich sein?

[Google Translate:]
I know it must be registered with success, but I do not know what.
Could you help me anybody there?


LG Terra

scottmartin
19 Feb 2014, 8:17 AM
You can remove items just as you add



container.remove(loginForm, false); // keep old item around to login again
container.add(newForm);

terra75
19 Feb 2014, 12:49 PM
Hello !

I understand nothing.

I have the Center Panel... look:

Ext.define('IOS.view.default.Center', {
extend : 'Ext.panel.Panel',
alias : 'widget.centerform',

requires : ['IOS.view.login.Login'],

initComponent : function () {
var me = this;

Ext.apply(me, {

deferredRender : false,
cls : 'emptyMainPanel',
baseCls : 'x-plain',
border : false,
layout : {
align : 'center',
pack : 'center',
type : 'vbox'
},
id : 'centerpanel',
items : [{

height : 100,
width : 360,
split : false,
border : false,
floatable : false,
margins : '0 0 20 0',
cls : 'logoMainPanel',
baseCls : 'x-plain'
}, {

split : false,
collapsible : false,
border : false,
floatable : false,
items : [{
xtype : 'loginform'
}
]

}
]

});
me.callParent();
}

});

If I use the code in my LoginController.js, the CenterPanel was complete delete. If I resize my Browser, the Login is visible again.
And if i only ADD a other Class to my CenterPanel, i get the Error: TypeError: centerpanel.add is not a function. :((

This is the Top Class:

Ext.define('IOS.view.default.Top', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.top',

initComponent : function () {
var me = this;

Ext.apply(me, {
id : 'mainMenu',
border : true,
componentCls : 'top-border',
height : 30,
style : {
overflow : 'visible'
},
items : [
'xxx'
]

});
me.callParent();
}
});

LoginController.js:

Ext.define('IOS.controller.LoginController', {
extend : 'Ext.app.Controller',

requires : ['IOS.view.default.Top'],

onLoginButtonClick : function (button, e, options) {
var me = this;
if (button.up('form').getForm().isValid()) {
button.up('form').getForm().submit({
url : 'resources/php/shop.store.php',
method : 'POST',
params : {
type : 'login',
//username : username,
//password : password
},
success : function (form, action) {
//centerpanel.remove(loginForm, false); // keep old item around to login again
centerpanel.add(top);

},
failure : function (form, action) {
Ext.Msg.alert('Login Failed!', action.response.responseText);
}
});
}
},

init : function () {
var me = this;
this.control({
'#LoginButton' : {
click : this.onLoginButtonClick
}
});
}

});

Pleace help my ...

Terra