跟我一起学extjs5(23--模块Form的自定义的设计[1])

跟我一起学extjs5(23--模块Form的自定义的设计[1])

下面开始设计和完成一个简单的Form的自定义过程。先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个fieldSet,然后在fieldSet下面定义了若干个字段。

// 模块的form方案,可以定义多个方案
tf_formSchemes : [{
			tf_schemeOrder : 10,
			tf_schemeName : 'form方案1', // 第一个form方案
			tf_windowWidth : 600, // form window 的宽度
			tf_windowHeight : -1, // 高度-1 即为自动适应高度
			// 表头分组
			tf_schemeGroups : [{
						tf_formGroupId : 1, // id号
						tf_formGroupOrder : 10, // 表头分组序号
						tf_formGroupName : '工程项目基本信息',
						tf_numCols : 1, // 分栏数
						// 每一个表头分组下面的字段
						tf_groupFields : [{
							tf_formFieldOrder : 5,
							tf_fieldId : 10100010,
							tf_colspan : 1, // 此字段占用的栏数
							tf_width : -1,// 宽度,设置-1为 100%
							tf_isEndRow : true
								// 结束本行,下个字段从新的一行开始排列
							}, {
							tf_formFieldOrder : 10,
							tf_fieldId : 10100020, // 工程项目名称字段
							tf_colspan : 1, // 此字段占用的栏数
							tf_width : -1,// 宽度,设置-1为 100%
							tf_isEndRow : true
								// 结束本行,下个字段从新的一行开始排列
							}, {
							tf_formFieldOrder : 20,
							tf_fieldId : 10100030, // 工程项目编码字段
							tf_colspan : 1, // 此字段占用的栏数
							tf_width : -1,// 宽度,设置-1为 100%
							tf_isEndRow : true
								// 结束本行,下个字段从新的一行开始排列
							}]
					}, {
						tf_formGroupOrder : 20, // 表头分组序号
						tf_formGroupName : '工程项目附加信息',
						tf_numCols : 2, // 分栏数
						tf_collapsible : true, // 此fieldSet可折叠
						tf_collapsed : false, // 默认不折叠
						// 每一个表头分组下面的字段
						tf_groupFields : [{
							tf_formFieldOrder : 10,
							tf_fieldId : 10100040
								// 建筑面积
							}, {
							tf_formFieldOrder : 20,
							tf_fieldId : 10100050
								// 投资总额
							}, {
							tf_formFieldOrder : 30,
							tf_fieldId : 10100060,
							tf_isEndRow : true
								// 结束本行,下个字段从新的一行开始排列
								// 容积率
							}, {
							tf_formFieldOrder : 40,
							tf_fieldId : 10100070
								// 计划开工时间
							}, {
							tf_formFieldOrder : 50,
							tf_fieldId : 10100080
								// 计划竣工时间
							}, {
							tf_formFieldOrder : 60,
							tf_fieldId : 10100090
								// 是否通过验收
							}, {
							tf_formFieldOrder : 70,
							tf_fieldId : 10100100
								// 工程方量
							}]
					}]

		}]

基础数据准备就绪,就需要创建window了。在module目录下创建一个新的目录window,在 window目录下建立文件BaseWindow.js。

/**
 *
 * 一个显示、修改、新增的的窗口基类
 *
 */
Ext.define('app.view.module.window.BaseWindow', {
			extend : 'Ext.window.Window',
			alias : 'widget.basewindow',

			uses : ['app.view.module.form.BaseForm'],

			layout : 'fit',
			maximizable : true,
			closeAction : 'hide',

			bodyStyle : 'padding : 2px 2px 0',
			shadowOffset : 30,
			layout : 'fit',

			initComponent : function() {
				this.maxHeight = document.body.clientHeight * 0.98;

				var me = this;

				this.formScheme = this.getViewModel().get('tf_formSchemes')[0]; // 取得第一个form方案
				console.log(this.formScheme);
				this.title = this.getViewModel().get('tf_title');
				this.glyph = this.getViewModel().get('tf_glyph');

				var w = this.formScheme.tf_windowWidth;
				var h = this.formScheme.tf_windowHeight;
				// 高度为-1表示是自适应
				if (w == -1 && h == -1) {
					this.width = 600;
					this.height = 400;
					this.maximized = true;
				} else {
					if (w != -1)
						this.width = Math.min(w, document.body.clientWidth - 2);
					if (h != -1)
						this.height = Math.min(h, document.body.clientHeight - 2);
				};
				if (w == -1 && h != -1) { // 宽度最大化
					this.width = document.body.clientWidth - 40;
				}
				this.tools = [{
							type : 'collapse',
							tooltip : '当前记录导出至Excel'
						}];

				this.items = [{
							xtype : 'baseform',
							viewModel : this.getViewModel(),
							formScheme : this.formScheme
						}]
				this.callParent(arguments);
			}

		});

在这个window中根据,配置信息来创建立窗口的大小和title值,然后去创建form。

在module目录中再建立一个form目录,在form目录下建立文件BaseForm.js。在Form中设置好参数后,根据配置信息来创建各个fieldSet。这个类的处理很复杂,要处理正常的fieldSet,还要处理tab ,accordion,以及是否是子模块的Grid的判断,下面的程序里已经简化了。

/**
 *
 * 一个form窗口的基类,新增、显示、修改、审核、审批等功能继承了这个窗口
 *
 */

Ext.define('app.view.module.form.BaseForm', {
			extend : 'Ext.form.Panel',
			alias : 'widget.baseform',

			autoScroll : true,

			buttonAlign : 'center',
			initComponent : function() {
				var me = this;
				this.buttons = [];
				this.buttons.push({
							text : '关闭',
							itemId : 'close',
							icon : 'images/button/return.png'
						});
				me.items = [];

				var groups = this.formScheme.tf_schemeGroups, hasTab = false;
				var hasInTabPanel = false; // 是否有嵌在页里面的tab,
				var inTabPanel;
				Ext.each(groups, function(group) {
							group.tf_numCols = group.tf_numCols || me.formScheme.tf_numCols;
							hasTab = hasTab || (group.tf_displayMode == 'tab');
							hasInTabPanel = hasInTabPanel
									|| (group.tf_displayMode == 'intabpanel');
						});
				if (hasTab) {
					var tabpanel = {
						xtype : 'tabpanel',
						frame : false,
						border : false,
						bodyPadding : '5 5 5 5',
						items : []
					};
					groups[0].tf_displayMode = 'tab'; // 如果第一个tab忘了设置
					var nowtab;

					Ext.each(groups, function(group) {
								if (group.tf_displayMode == 'tab') {
									if (nowtab)
										tabpanel.items.push(nowtab);
									nowtab = {
										xtype : 'container',
										title : group.tf_formGroupName,
										items : []
									};
								}
								nowtab.items.push(me.createFieldSetOrSubModule(group));

							});
					tabpanel.items.push(nowtab);
					me.items = tabpanel;
				} else {
					me.bodyStyle = 'padding : 5px 5px 0';
					Ext.each(groups, function(group) {
								if (group.tf_displayMode == 'intabpanel') {
									inTabPanel = {
										xtype : 'tabpanel',
										frame : false,
										border : false,
										height : 400,
										items : []
									};
									Ext.apply(inTabPanel, me
													.getOtherSetting(group.tf_otherSetting))
									me.items.push(inTabPanel);
								} else if (group.tf_displayMode == 'intab') {
									var t = me.createFieldSetOrSubModule(group);
									t.title = group.tf_formGroupName;
									inTabPanel.items.push(t)
								} else
									me.items.push(me.createFieldSetOrSubModule(group))

							})
				}
				me.callParent(arguments);
			},

			getOtherSetting : function(str) {
				if (!str)
					return {}
				else
					return Ext.decode('{' + str + '}', true)

			},

			createFieldSetOrSubModule : function(group) {
				var me = this;

				return Ext.create('app.view.module.form.FieldSet', {
							autoScroll : true,
							viewModel : this.getViewModel(),
							schemeGroup : group,
							numCols : group.tf_numCols
						})

			},

			initForm : function() {

			},

			// 不是grid中调用的显示某条记录的信息,可能是其他模块点击namefields来调用的
			setRecordId : function(id) {
				var me = this;
				this.module.model.load(id, {
							success : function(record, operation, success) {
								// success中的record中返回的raw 数据,是字符串,没有经过decode,要自己转成对象
								me.setData(Ext.create(me.module.model, Ext.decode(record.raw)));
							}
						});
			},

			setData : function(model) {
				this.data = model;
				// this.getForm().reset();
				if (this.data) {
					// Ext.suspendLayouts();
					this.getForm().loadRecord(this.data);
					// Ext.resumeLayouts(true);
				} else
					this.getForm().reset();
				// 检查form中是否有子模块,如果有则刷新
			}

		});

Form的控件创建好以后,会继续创建每一个FieldSet的内容。在form目录中加入文件FieldSet.js。在这个FieldSet中,暂时还没有加入字段的生成。

/**
 *
 * 生成form中的一个fieldSet的类
 *
 */
Ext.define('app.view.module.form.FieldSet', {
			extend : 'Ext.form.FieldSet',
			alias : 'widget.formfieldset',

			defaultType : 'textfield',
			defaults : {},
			layout : 'anchor',
			config : {
				module : undefined, //  此模块的module定义
				schemeGroup : undefined, // 定义了此fieldSet的属性以及下面需要加的字段
				numCols : undefined,
				formtype : undefined
			},

			initComponent : function() {
				this.title = this.schemeGroup.tf_formGroupName;
				this.collapsible = this.schemeGroup.tf_collapsible;
				this.collapsed = this.schemeGroup.tf_collapsed;

				this.items = [];

				this.callParent(arguments);

			}
		})

以过以上步骤,加入了 window-form-fieldset的三级控件的创建,下面来显示一下结果。在GridToolbar.js中,给修改按钮加个事件:

 {
							text : '修改',
							glyph : 0xf044,
							itemId : 'edit',
							handler : 'editRecord'
						}

在ModuleController.js中加入函数:

	editRecord : function(button) {
		var window = Ext.widget('basewindow',{
			viewModel : this.getView().getViewModel()
		});
		window.show();
	},
	

在Module.js 的uses 中加入  ‘app.view.module.window.BaseWindow‘,这样就可以运行了。

下面一节将会加入不同种类的field。

跟我一起学extjs5(23--模块Form的自定义的设计[1])

时间: 2024-10-10 20:49:50

跟我一起学extjs5(23--模块Form的自定义的设计[1])的相关文章

跟我一起学extjs5(22--模块Form的自定义的设计)

跟我一起学extjs5(22--模块Form的自定义的设计) 前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1?可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能: 2?对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案,各个操作员可以选择他们感兴趣的Form方案来进行数据的修改. 3?每个Form方案中可以定义若干个字段分组(FieldSet或FieldContainer).

跟我一起学extjs5(25--模块Form的自定义的设计[3])

跟我一起学extjs5(25--模块Form的自定义的设计[3]) 自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面. 从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form.但在实际应用的时候,我们只要完成大部分

21、手把手教你Extjs5(二十一)模块Form的自定义的设计

前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1?可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能: 2?对于上述各种功能可以选择不同的Form方案,比如说修改可以有几个方案,各个操作员可以选择他们感兴趣的Form方案来进行数据的修改. 3?每个Form方案中可以定义若干个字段分组(FieldSet或FieldContainer). 4?每个字段分组中可以放置若干个字段. 5?每个Form方案可

23、手把手教你Extjs5(二十三)模块Form的自定义的设计[2]

在本节中将要加入各种类型的字段,在加入字段的时候由于可以一行加入多个字段,因此层次结构又多了一层fieldcontainer.form里面的主要层次结构如下: form -- fieldSet -- fieldcontainer -- field. 现在加入fieldcontainer的生成器的文件,在factory中加入文件FieldContainerFactory.js /** * 字段容器factory */ Ext.define('app.view.module.factory.Fiel

22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]

下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formSchemes,在这个属性下面可以定义多个formScheme,下面的例子中只加入了一个,在formScheme上,加了二个fieldSet,然后在fieldSet下面定义了若干个字段. // 模块的form方案,可以定义多个方案 tf_formSchemes: [{ tf_schemeOrder: 10, t

24、手把手教你Extjs5(二十四)模块Form的自定义的设计[3]

自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. 上面设置好了以后,可以看到Form中FieldSet都放置在Tab中了,下面的截图展示了二个Tab的界面. 从理论上说,如果你的Form配置信息设置得合理,可以得到你想要的任何样式的Form.但在实际应用的时候,我们只要完成大部分能自动生成就足够了,真正程序中有超级变态复杂的Form结构,可以自己

跟我一起学extjs5(22--模块Form的自己定义的设计)

跟我一起学extjs5(22--模块Form的自己定义的设计) 前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完毕的整体目标. 1?能够有多个Form方案,相应于显示.新增.改动.审核.审批等功能: 2?对于上述各种功能能够选择不同的Form方案.比方说改动能够有几个方案,各个操作员能够选择他们感兴趣的Form方案来进行数据的改动. 3?每一个Form方案中能够定义若干个字段分组(FieldSet或FieldContaine

零基础学python-2.23 模块

这一节我们来聊聊模块 1.模块:函数.类等组合在一个文件里面 2.导入模块: import xxx 3.调用模块方法 import sys sys.platform 输出:'win32' 详细的展开会在后面的章节. 就说到这里,谢谢大家 ------------------------------------------------------------------ 点击跳转零基础学python-目录 版权声明:本文为博主原创文章,未经博主允许不得转载.

跟我一起学extjs5(11--自定义模块的设计)

跟我一起学extjs5(11--自定义模块的设计) 从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下信息: 1.模块的基本信息 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块. 模块分组:模块分到哪个组里,比如说业务模块1.业务模块2.系统设置.系统管理等. 模块标识:系统中唯一的模块的标识,一般这个标识等同于数据库