megaminx之旅一：创建一个模块

要在Megaminx项目中增加一个模块，是很简单的。下面介绍如何创建一个模块，模块名称是example。

• 首先，在megaminx-extjs中的modules目录下创建目录，分别是：modules/example,modules/example/css, modules/example/images, modules/example/js, 创建modules/ExampleModule.js文件，如下内容：

Megaminx.modules.ExampleModule = function(config) {Megaminx.modules.ExampleModule.superclass.constructor.call(this, config);};Ext.extend(Megaminx.modules.ExampleModule, Megaminx.app.MainWindow, {id:'example'    ,text: 'Example'    ,iconCls:'modules-example'    ,_module:{ID:1}    ,createWindow:function(){var config = this._module.config || {};var desktop = this.app.getDesktop();    var win = desktop.getWindow(this.id);        // auto height and width        var h = parseInt(desktop.getWinHeight() * 0.9);    var w = parseInt(desktop.getWinWidth() * 0.9);    config.height = parseInt(config.height) || this.defaults.winHeight;    config.width = parseInt(config.width) || this.defaults.winWidth;    if(config.height > h){ config.height = h; }    if(config.width > w){ config.width = w; }        if (win){    win.setSize(config.width, config.height);    }    else {    config = Ext.apply(config, {    id:this.id    ,layout:'fit'    ,iconCls:this.iconCls    ,title:this.text    ,constrainHeader: true    ,shim: false    });    win = desktop.createWindow(config);    }        win.show(); }  ,doCommand:function(form, parameters){alert('doComand');alert(form);}});

说明：_module:{ID:1} 定义了Example模块的id是1

• 然后，需要在数据库定义模块信息，如下：

insert into module (id, version, create_date, modify_date, name, description, data) values (1, 0, null, null, 'example', 'demo', '{config:{height:651,width:912 }      }');

说明：定义Example模块的id是1，和ExampleModule.js文件中定义的module是一致的。

• 最后，修改web根目录下的init.js文件，添加代码：

$LAB.script("modules/ExampleModule.js").script("modules/SystemModule.js").wait(function(){...getModules : function(){return [ new Megaminx.modules.SystemModule()，new Megaminx.modules.ExampleModule()];},...})

可以运行megaminx-extjs项目了，如图：

程序结构图如下：

说明：

• 类Megaminx.app.MainWindow位于lib/megaminx/Megaminx.App.js文件中
• 属性 _module:{ID:1} 和 数据库中定义的模块信息id要一致。
• 属性 iconCls:'modules-example'定义了example模块的图标。你还需要修改文件lib/megaminx/css/megaminx-all.css, 添加代码：

/* modules icon */.modules-system {background-image:url(../images/system16x16.png) !important;}.modules-example {background-image:url(../images/example16x16.png) !important;}......

• 数据库中模块的配置属性，只能是字符类型，如果需要定义数值类型，那么在客户端需要转换，注意代码：

......    config.height = parseInt(config.height) || this.defaults.winHeight;    config.width = parseInt(config.width) || this.defaults.winWidth;......

• 给ExampleModule提供一些方法，方便以后使用：

Ext.extend(Megaminx.modules.ExampleModule, Megaminx.app.MainWindow, {......,getDesktop:function(){return this.app.getDesktop()},getWindow:function(){return this.getDesktop().getWindow(this.id);}......});

必须覆盖父类Megaminx.app.MainWindow的doCommand方法，暂时显示提示。

Megaminx项目源码地址：http://code.google.com/p/jmegaminx/