跟我一起学extjs5(23--模块Form的自定义的设计[1])
来源:互联网 发布:php视频网站源码下载 编辑:程序博客网 时间:2024/04/29 21:23
跟我一起学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)} elseme.items.push(me.createFieldSetOrSubModule(group))})}me.callParent(arguments);},getOtherSetting : function(str) {if (!str)return {}elsereturn 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);} elsethis.getForm().reset();// 检查form中是否有子模块,如果有则刷新}});
/** * * 生成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。
1 0
- 跟我一起学extjs5(23--模块Form的自定义的设计[1])
- 跟我一起学extjs5(22--模块Form的自定义的设计)
- 跟我一起学extjs5(24--模块Form的自定义的设计[2])
- 跟我一起学extjs5(25--模块Form的自定义的设计[3])
- 跟我一起学extjs5(11--自定义模块的设计)
- 跟我一起学extjs5(33--单个模块的设计[1建立表和bean])
- 跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])
- 跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据])
- 跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除])
- 跟我一起学extjs5(12--模块界面的总体设计)
- 跟我一起学extjs5(34--单个模块的设计[2建立表单表bean])
- 跟我一起学extjs5(14--模块字段和Grid列的定义[1])
- 跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])
- 跟我一起学extjs5(35--单个模块的设计[3根据类的标注自动生成数据])
- 跟我一起学extjs5(40--增加一个自定义模块[1建立表和bean文件])
- 跟我一起学extjs5(08--自定义菜单1)
- 跟我一起学extjs5(15--模块字段和Grid列的定义[2])
- 跟我一起学extjs5(18--模块的新增、修改、删除操作)
- 项目管理------架构设计
- javascript实现深度赋值\深度克隆
- python+PyQT+Eric安装配置
- 第三周组队训练赛-长沙现场赛解题报告
- 怎样编写scrapy扩展
- 跟我一起学extjs5(23--模块Form的自定义的设计[1])
- OnDraw函数和OnPaint函数
- 10大Web漏洞扫描程序
- 原材料配送问题的遗传算法实现(C语言)
- freeswitch的dialplan中condition变量
- 字符串基础及常用算法
- 1407280912-hd-第几天?.cpp
- 【Java】变量初始化顺序
- 安装LUA报错