megaminx之旅一：创建一个模块

最新推荐文章于 2024-09-19 19:11:44 发布

运交

最新推荐文章于 2024-09-19 19:11:44 发布

阅读量332

点赞数

分类专栏： Megaminx 文章标签： function module 数据库 parameters date insert

本文链接：https://blog.csdn.net/Yun__Jiao/article/details/6686778

版权

Megaminx 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

要在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/