我想创建一个用户登录和注销的应用程序。当用户登录时，系统会将用户名、sessionid等用户信息存入localstorage，然后进入index页面。索引页面的左侧有一个带有用户名的标题栏和一个注销按钮。但是当索引页面出现时，它无法获取存储在本地存储中的数据，该数据是在用户登录时存储的。我的代码如下：
索引页：
Ext.define('MyApp.view.MyPanel', {
extend : 'Ext.Panel',
id : 'myPanel',
config : {
xtype : 'panel',
layout : 'vbox',
height : '100%',
width : '100%',
items : [
{
xtype : 'titlebar',
docked : 'top',
title : 'my panel',
items : [
{
align : 'left',
id : 'portal-username',
text : 'qq' //i used localStorage.getItem（'userName'） first，but not as good.
},
{
align : 'right',
text : 'log out',
listeners : {
tap : function(){
var userName=null;var rememberPassword=null;var password=null;
if(userName=Ext.getCmp('userName'))userName.setValue('');
if(password=Ext.getCmp('password'))password.setValue('');
if(rememberPassword=Ext.getCmp('rememberPassword'))rememberPassword.setChecked(false);
//localstorage
localStorage.removeItem('userName','');
localStorage.removeItem('password','');
localStorage.removeItem('SessionId','');
localStorage.removeItem('rememberPassword','');
var oldp=Ext.getCmp('loginPanel');if(oldp)oldp.destroy();
var newActivePanel = Ext.create('MyApp.view.LoginPanel');
Ext.Viewport.add(newActivePanel);
Ext.Viewport.animateActiveItem(newActivePanel,{type:'slide',direction:'left'});
}
}
}
]
}
]
}
});
登录面板的一部分：
items : [
{
xtype : 'button',
text : 'login',
ui : 'action',
handler : function() {
var userName = Ext.getCmp('userName').getValue();
var password = Ext.getCmp('password').getValue();
var rememberPassword = Ext.getCmp('rememberPassword').getChecked()+ '';
if(!userName||!password){
Ext.Msg.alert('prompt','login failure，try again！',Ext.emptyFn);
}
else Ext.Ajax.request({
url : remoteServer,
params : {
loginName: userName,
passWord : password,
SessionId : localStorage.getItem('SessionId');
},
method : 'POST',
callback : function(options,success,response) {
if (success) {
var result = Ext.JSON.decode(response.responseText.trim());
var status = result.status;
if (status == 'success') {
if (rememberPassword == 'true')
localStorage.setItem('rememberPassword',rememberPassword);
localStorage.setItem('userName',userName);
localStorage.setItem('password',password);
localStorage.setItem('SessionId',result.SessionId);
var oldp=Ext.getCmp('MyPanel');if(oldp)oldp.destroy();
var newActivePanel = Ext.create('MyApp.view.MyPanel');
Ext.Viewport.add(newActivePanel);
Ext.Viewport.animateActiveItem(newActivePanel,{type:'slide',direction:'left'});
} else {
localStorage.setItem('userName','');
localStorage.setItem('password','');
localStorage.setItem('JSessionId','');
localStorage.setItem('rememberPassword','');
Ext.Msg.alert('prompt','login failure，try again！',Ext.emptyFn);
}
} else {
Ext.Msg.alert('prompt','login failure，try again！',Ext.emptyFn);
}
}
});
}
}
]
下面是我的控制器：
Ext.define('MyApp.controller.MyController',
{
extend : 'Ext.app.Controller',
id : 'MyController',
config : {
control : {
MyPanel : {
show : 'panelActive'
},
},
refs : {
MyPanel : '#myPanel'
}
}//config
,panelActive : function(){
Ext.getCmp('portal-username').setText(localStorage.getItem('userName'));
}
});