嗯,我对javascript很陌生,当然,我对extJS也很陌生,这是一个Sencha JS框架。我想做的事情很简单,但我对js不太了解。
这是我得到的js文件:
Ext.define('app.util.UserWGroupInfo', {
alternateClassName: ['UserInfo', 'WGroupInfo'],
singleton: true,
/**
* Default information to be shown / displayed
*/
statics: {
userData: {
'username': 'User Name',
'phoneNumber': 'Phone',
'firstName': 'First Name',
'lastName': 'Last Name',
'emailAddress': 'Email',
'address.addressLine1': 'Address',
'address.city': 'City',
'address.stateOrProv': 'State'
},
wGroupData: {
'name': 'Name',
'type': 'Type',
'description': 'Description',
'phoneNumber': 'Phone',
'poc': 'POC'
}
},
/**
* Holder for the data to display
* @type {Object}
*/
dataToDisplay: {
},
/**
* display a popup on no data retrieved
* @type {Boolean} [true]
*/
displayMsg: true,
/**
* Gets data of an user from the server
*
* @param {String} userInfo, consider passing "usid:name"
* @param {Boolean} double set true to check Like User&WGroup
*/
getUserInfo: function(userInfo, displayMsg) {
if (Ext.isEmpty(userInfo)) {
return;
}
userInfo = userInfo.split(':');
var user = userInfo[0] + ':' + + userInfo[1];
//Note: to retrieve tooltip, set defaults data
this.dataToDisplay = this.statics().userData;
this.typeSearch = "User";
if (displayMsg) {
this.displayMsg = displayMsg;
}
this.getSysAdminObj('users', user);
},
/**
* Gets data of a workgroup from the server
*
* @param {String} wGroupInfo, consider passing "wgid:name"
* @param {Boolean} double set true to check Like User&WGroup
*/
getWGroupInfo: function(wGroupInfo, displayMsg) {
if (Ext.isEmpty(wGroupInfo)) {
return;
}
wGroupInfo = wGroupInfo.split(':');
var wGroup = wGroupInfo[0] + ':' + wGroupInfo[1];
//Note: to retrieve tooltip, set default data
this.dataToDisplay = this.statics().wGroupData;
this.typeSearch = "Work Group";
if (displayMsg) {
this.displayMsg = displayMsg;
}
this.getSysAdminObj('workgroups', wGroup);
},
getDataInfo: function() {
return this.dataInfo;
},
/**
* Retrieve a SysAdmin object to perform a connection to the server side.
*
* @param {String} type. Consider as possible values: "users" or "workgroups"
* @param {String} info
*/
getSysAdminObj: function(type, info) {
var me = this;
Ext.Ajax.request ({
url: '../rest/sysadmin/' + type + '/' + info,
method: 'GET',
scope: me,
async: false,
callback: me.storeInfo
});
},
/**
* Map information retrieved to the dataInfo object.
*
* Before storing the data, it is necessary to check if the search should be executed as user or workgroup.
*/
storeInfo: function(o, s, r) {
if ( !s ) {
if (this.displayMsg) {
Logger.notify('User Info Loading', 'Failed to load extra user info');
}
this.errorResponse = true;
return;
};
this.errorResponse = false;
var obtainedData = XmlConverter.unmarshal(r);
this.dataInfo = obtainedData;
}
});
我已经得到了这个类,它是一个单例,它做什么?它根据对REST服务(Java)的调用检索用户信息和工作组信息,我使用"SysAdminObject",这是一个处理连接的一些行为的"js",最后,我使用一个"Ext.Ajax.request"从服务器获取数据。当我执行回调时,我可以看到函数"storeInfo",它将数据设置为一个变量(好吧,它似乎就是这么做的)。然后我可以处理dataInfo变量,它包含我需要的所有信息,并用方法"getDataInfo"返回它。有没有什么方法可以在您调用服务时直接返回数据?我的意思是在java中,例如:
public Object getUserInfo() {
Object obj = null;
obj = getFromServer();
return obj;
}
extJS和Javascript有没有办法实现这种行为?
提前感谢您的时间和帮助。我真的很感激。
return
由您指定为callback
函数的任何方法处理。在本例中,它由storeInfo()
函数处理。
最接近Java的例子是:
getUserInfo: function() {
getSysAdminObj();
return this.dataInfo;
}
getSysAdminObj()
函数获取数据并将其存储在this.dataInfo
中,如代码所示。由于服务器调用不是异步的(如async: false
行所设置的),javascript代码将等待,直到服务器调用返回数据,因此您知道this.dataInfo
将包含请求的数据。但是,如果设置了async: true
,那么我上面代码中的return this.dataInfo
行可以在设置this.dataInfo
之前执行。
很多时候,最好不要等待服务器请求完成(因为这会使浏览器中的任何代码停止运行,直到潜在的慢速服务器调用返回)。因此,那么async
将被设置为true
。为了正确处理此问题,您必须确保服务器调用后的代码不依赖于服务器调用的结果,相反,任何依赖于这些结果的代码都必须放在上面提到的callback
函数中。
困难在于,从callback
函数返回某些内容不会将该值返回给进行原始服务器调用的方法。因此,您不能仅仅将return this.dataInfo
移动到callback
函数中并期望它工作。相反,您需要使用侦听器和事件。callback
函数应该触发一个事件,该事件告诉正在侦听的代码数据已被检索,因此侦听器可以对该代码执行它应该执行的任何操作。
例如,假设您制作了一个ExtJS网格面板,并希望它显示代码正在检索的SysAdmin数据。您将向上面显示的单例添加一个事件,storeInfo
函数将激发该事件,而不是存储数据,并将数据作为参数传递到事件中。连接到您的singleton的将是该事件的侦听器,它将接收数据作为其参数,然后将该数据加载到网格面板中。
我知道我在这篇文章中涉及了很多话题,但我不确定你已经知道了什么。如果你不熟悉这些主题,你可以搜索更多信息。我希望这是有帮助的,可以让你指向正确的方向。正如您所看到的,使用JavaScript与Java有一些重要的区别。
此外,ExtJS文档非常有用,所以如果您还没有,请查看这些文档。此链接到最新版本http://docs.sencha.com/extjs/4.2.2/#/api