Extjs4 ExtJS 4 MVC桌面-如何以编程方式创建/打开模块

我有一个工作的web桌面应用程序，非常类似于开箱即用的ExtJS桌面示例，其中有许多图标，单击这些图标会生成一个窗口

我试图找出如何以编程方式完成同样的事情：

var x = Ext.create('MyApp.view.users.Module')
x.launcher.handler();

这将调用createWindow（）函数，其第一行是：

var b = this.app.getDesktop();

这句话的意思是：

无法调用未定义的方法“getDesktop”

这显然意味着“这个”上面没有“应用程序”

我是一个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
},

...

---

}))

您在这里遇到了范围界定问题。尝试将init方法更改为initComponent

---

使用Firefox和Firebug调试应用程序。将断点放在变量b=。。。行并查看作用域中的变量

您在这里遇到了范围界定问题。尝试将init方法更改为initComponent

---

使用Firefox和Firebug调试应用程序。将断点放在变量b=。。。行并查看作用域中的变量

好的，我找到了解决这个问题的方法

当我创建桌面应用程序作为应用程序创建的一部分时，我将全局变量设置为该操作的结果：

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);
},

....

---

此代码在加载时打开两个模块窗口，并将它们并排放置在桌面上。

好的，我找到了解决此问题的方法

当我创建桌面应用程序作为应用程序创建的一部分时，我将全局变量设置为该操作的结果：

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);
},

....

此代码在加载时打开两个模块窗口，并将它们并排放置在桌面上