我有一个工作的web桌面应用程序,非常类似于开箱即用的ExtJS桌面示例,其中有许多图标,当点击时,生成一个窗口。
我正试图找出如何做同样的事情编程:
var x = Ext.create('MyApp.view.users.Module')
x.launcher.handler();
调用createWindow()函数,其中第一行是:
var b = this.app.getDesktop();
无法调用未定义的方法
这显然意味着"this"上面没有"app"。
我是一个ExtJS新手,不知道如何将模块绑定到应用程序,或者如何以点击图标的方式正确抓取模块。如有任何帮助,不胜感激。
模块代码:Ext.define('MyApp.view.users.Module', {
requires: ["Ext.tab.Panel"],
alias: 'widget.usersmodule',
extend: 'Ext.ux.desktop.Module',
id: 'users-module-win',
itemId: 'usersmodule',
init: function(){
this.launcher = {
handler: this.createWindow,
iconCls: 'icon-users',
scope: this,
text: 'Users',
windowId: 'users-module-win'
}
},
...
createWindow: function(){
var b = this.app.getDesktop();
var a = b.getWindow('users-module-win');
...
a.show();
return a
},
...
});
好吧,我想到了一个解决这个问题的方法。
当我创建桌面应用程序作为应用程序创建的一部分时,我将全局变量设置为该操作的结果:
var _myDesktopApp;
Ext.application({
appFolder:'MyApp',
controllers:[
....
],
name:'MyApp',
launch:function () {
Ext.Loader.setPath({
....
});
Ext.require('MyDesktop.App');
Ext.require('Ext.tab.*');
Ext.onReady(function () {
_myDesktopApp = Ext.create('MyDesktop.App');
});
};
}
});
然后在我的桌面文件中,我可以获得一个特定的模块并打开它,并设置一些初始大小:
Ext.define("MyDesktop.App", {
extend: "Ext.ux.desktop.App",
requires: [
"Ext.window.MessageBox",
"Ext.ux.desktop.ShortcutModel",
"MyApp.view.prospects.Module",
"MyApp.view.users.Module"
],
init: function () {
this.callParent();
var prospects_width = 700;
var prospects_height = 500;
var prospects_x = 0;
var prospects_y = 0;
_myDesktopApp.getModule('prospects-module-window').createWindow(prospects_width, prospects_height, prospects_x, prospects_y);
var users_width = 700;
var users_height = 500;
var users_x = 700;
var users_y = 0;
_myDesktopApp.getModule('users-module-window').createWindow(users_width, users_height, users_x, users_y);
},
....
此代码在加载时打开2个模块窗口,并将它们并排放在桌面上。
这里有一个范围问题。试着把init方法改为initComponent。
使用Firefox和Firebug调试应用程序。在var b =…上放置断点行,看看有哪些变量在作用域中。