megaminx之旅四：班级(Classes)的UI设计-CSDN博客

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

本文介绍了一个班级管理系统的设计与实现过程，包括定义班级信息的基本字段、创建数据存储组件、定义表格和表单，以及如何在数据库中配置这些设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

班级(Classes)包含三个信息点，名称(name)，班主任(advistor)，描述(description)。

定义Example模块包，修改lib/megaminx/js/Megaminx.js文件，添加部分代码：

......
Ext.ns('Megaminx.modules.system');
Ext.ns('Megaminx.modules.example');
......

在modules/example/js目录中，创建Classes.js文件。在Classes.js中添加如下代码:

定义一些基本常量，字段等等，代码如：

Megaminx.modules.example.Classes ={
	formTitle:'Classes Info'
	,gridTitle: 'Classes List'
}

Ext.apply(Megaminx.modules.example.Classes, {
	_id:function(){
		return {
			id:Ext.id()
			,fxtype:'numberfield'
			,type:Ext.data.Types.NUMBER
			,name:'ID'
			,title:this.idTitle || 'ID'
			,mapping:'ID'
			,sortable:true
			,width: 30
			,alias:'_classes'
		};
	}
	
	,_version:function(){
		return {
			id:Ext.id()
			,fxtype:'numberfield'
			,type:Ext.data.Types.INTEGER
			,name:'version'
			,title:this.versionTitle || 'Version'
			,mapping:'version'
			,sortable:false
			,width: 30
			,alias:'_classes'
		};
	}
	
	,_name:function(){
		return {
			id:Ext.id()
			,fxtype:'textfield'
			,type:Ext.data.Types.STRING
			,name:'name'
			,title:this.nameTitle ||'Name'
			,mapping:'name'
			,sortable:true
			,width: 80
			,maxLength:50
			,alias:'_classes'
		};
	}
	
	,_description:function(){
		return {
			id:Ext.id()
			,fxtype:'textarea'
			,type:Ext.data.Types.STRING
			,name:'description'
			,title:this.descriptionTitle ||'Description'
			,mapping:'description'
			,sortable:true
			,width: 80
			,maxLength:255
			,alias:'_classes'};
	}
	
	,_advistor:function(){
		return {
			id:Ext.id()
			,fxtype:'textfield'
			,type:Ext.data.Types.STRING
			,name:'name'
			,title:this.advistorTitle ||'Advistor'
			,mapping:'advistor'
			,sortable:true
			,width: 80
			,maxLength:50
			,alias:'_classes'
		};
	}	
});

注：这样是为了统一代码。

定义Store，数据存取控件，代码如下：

Megaminx.modules.example.ClassesStore = function(config){
	config = config ||{};

	var classes = Megaminx.modules.example.Classes;	
	var _id = classes._id();
	var _version = classes._version();
	var _name = classes._name();
	var _advistor = classes._advistor();
	var _description = classes._description();
	
		
    Ext.apply(config, {
        namespace: 'example/classes'
        ,reader:new Ext.data.JsonReader(
			{
				root:'data'
				,idProperty:_id.name
				,totalProperty:'total'
			}
			,Ext.data.Record.create([
				{name: _id.name, mapping:_id.mapping, type: _id.type}
				,{name: _version.name, mapping:_version.mapping, type: _version.type}
				,{name: _name.name, mapping:_name.mapping, type: _name.type}
				,{name: _advistor.name, mapping:_advistor.mapping, type: _advistor.type}
				,{name: _description.name, mapping:_description.mapping, type: _description.type}
			])
		)
    }); 
      	
	Megaminx.modules.example.ClassesStore.superclass.constructor.call(this, config);
	
};
Ext.extend(Megaminx.modules.example.ClassesStore, Megaminx.data.Store, {

});
Ext.reg('example.classesstore', Megaminx.modules.example.ClassesStore);

注：namespace定义为'example/classes', 这要与服务器端struts定义一致。

定义班级(Classes)表格，如下代码：

Megaminx.modules.example.ClassesGrid = function(config){
    Megaminx.modules.example.ClassesGrid.superclass.constructor.call(this, config);   
};
Ext.extend(Megaminx.modules.example.ClassesGrid, Megaminx.grid.Grid, {
	title: Megaminx.modules.example.Classes.formTitle

	,initComponent:function() {
		var classes = Megaminx.modules.example.Classes;	
		var _id = classes._id();
		var _version = classes._version();
		var _name = classes._name();
		var _advistor = classes._advistor();
		var _description = classes._description();
			
		var meta = this._meta;
		this._initColumns = [{
        	id:_id.id
        	,header: _id.title
        	, width: _id.width
        	, sortable: _id.sortable
        	, dataIndex: _id.name
        },{
        	id:_version.id
        	,header: _version.title
        	, width: _version.width
        	, sortable: _version.sortable
        	, dataIndex: _version.name
        	, hidden:true
        },{
        	id:_name.id
        	,header: _name.title
        	, width: _name.width
        	, sortable: _name.sortable
        	, dataIndex: _name.name
        },{
        	id:_advistor.id
        	,header: _advistor.title
        	, width: _advistor.width
        	, sortable: _advistor.sortable
        	, dataIndex: _advistor.name
        },{
        	id:_description.id
        	,header: _description.title
        	, width: _description.width
        	, sortable: _description.sortable
        	, dataIndex: _description.name
        }];


		Megaminx.modules.example.ClassesGrid.superclass.initComponent.apply(this, arguments);
		
		this._id = this.findById(_id.id);							
		this._version = this.findById(_version.id);
		this._name = this.findById(_name.id);
		this._advistor = this.findById(_advistor.id);
		this._description = this.findById(_description.id);
	}	
	
});
Ext.reg('example.classesgrid', Megaminx.modules.example.ClassesGrid);

定义班级(Classes)表单，如下代码：

Megaminx.modules.example.ClassesForm = function(config){

    Megaminx.modules.example.ClassesForm.superclass.constructor.call(this, config);

};
Ext.extend(Megaminx.modules.example.ClassesForm, Megaminx.form.Form, {
	title: Megaminx.modules.example.Classes.formTitle
	,height:100
	
	,initComponent:function() {
		var classes = Megaminx.modules.example.Classes;	
		var _id = classes._id();
		var _version = classes._version();
		var _name = classes._name();
		var _advistor = classes._advistor();
		var _description = classes._description();	
		
		var config ={	
			items:[{
				id:_version.id
				,xtype:'hidden'
				,name:_version.name
			},{
				layout:'column'
				,items:[{
					columnWidth:.5
                	,layout: 'form'
                	,items:[{
                		id:_id.id
                		,xtype: _id.fxtype
                		,name:_id.name	
                		,fieldLabel:_id.title
                		,anchor:'95%'	
                	}]
				},{
					columnWidth:.5
                	,layout: 'form'
                	,items:[{
                		id:_name.id
                		,xtype: _name.fxtype
						,name:_name.name
						,maxLength: _name.maxLength	
						,fieldLabel:_name.title
						,allowBlank: false	
						,anchor:'95%'				
                	}]
				}]
			},{
				id:_advistor.id
				,xtype: _advistor.fxtype
				,name:_advistor.name
				,maxLength: _advistor.maxLength	
				,fieldLabel:_advistor.title
				,allowBlank: false	
				,anchor:'97.5%'
			},{
				id:_description.id
				,xtype: _description.fxtype
				,name:_description.name
				,maxLength: _description.maxLength
				,fieldLabel:_description.title
				,anchor:'97.5%'
			}]
		};
		
		Ext.apply(this, Ext.apply(this.initialConfig, config)); 
		Megaminx.modules.example.ClassesForm.superclass.initComponent.apply(this, arguments);
		
		this._id = this.findById(_id.id);							
		this._version = this.findById(_version.id);
		this._name = this.findById(_name.id);
		this._advistor = this.findById(_advistor.id);		
		this._description = this.findById(_description.id);						
	}
			
});
Ext.reg('example.classesform', Megaminx.modules.example.ClassesForm);

修改数据库中班级(Classes)的定义，代码如下：

insert into form (id, version, create_date, modify_date, name, description, data, folder) values (100, 0, null, null, 'manager classes', 'add/modfiy/read/delete classes', '{
	config:{
		xtype:"example.classesform"
    		,title:"Classes"
	}
    	
	,javascript:[
		{
       		directory:"modules/example/js/"
        	,files:[
				"Classes.js"
			]
    		}
	]
}', 'example');

运行程序，可以看到如图界面：