基于Extjs的web表单设计器 第四节——控件拖放
接着上一节介绍控件拖放的设计。
通过前面的介绍知道,我们的区域类型的容器控件有三种:Card、Table、Mixed。
Card 可以支持几乎所有的常用控件,包括:文本TextField、多文本TextArea、数字NumberField、金额NumberField、日期DateField、下拉树NetDropDown、按钮Button、复选框CheckBox、单选框Radio;Table可以支持的常用控件比Card稍微少一点,它不支持button类型的控件以及多文本TextArea控件;Mixed不支持常用控件,它只支持我们的容器控件类型,就是它本身和Card和Table,它的作用就是一个嵌套作用,让我们可以生成复杂的表单模板。三个类型的容器控件支持的子控件各不相同,我们先定义一个公共的Object对象来存储一些容器相关的信息,方便我们后面处理控件拖放事件的时候做一些判断使用。
1 //公共配置信息 2 ftConfig = { 3 isDraging: false, //表示是否正在拖放控件 4 dragXY: { x: 0, y: 0 }, //拖动控件时候记录坐标 5 panelType: \'Card Table Mixed\',//表示我们容器控件类型的字符串 6 tableRejectType: \'Button TextArea CheckBox Radio\'//表格区域不接受的控件类型字符串 7 };
然后就是我们具体的拖放处理代码逻辑。上一节我们介绍了使用一个Droptarget来为我们的画布控件添加了可以接收拖动、释放的功能,在Droptarget里面我们为它定义了两个事件1. notifyEnter事件,当我们的鼠标拖动控件到画布区域上面后就设置配置信息的isDraging=true;
2. notifyDrop事件,当我们在画布上释放拖动的控件后就会触发该事件,通过该事件我们获取到拖放的控件信息,并进行相关的拖放处理。
1 ftConfig = { 2 regNum: 1,//区域序号 3 ctrolNum: 1,//控件序号 4 isDraging: false, //表示是否正在拖放控件 5 dragXY: { x: 0, y: 0 }, //拖动控件时候记录坐标 6 panelType: \'card table mixed\',//表示我们容器控件类型的字符串 7 tableRejectType: \'button textarea checkbox radio\'//表格区域不接受的控件类型字符串 8 }; 9 function notifyDrop(dd, e, data) { 10 var c, d = data.records[0].data, dropId, 11 type = d.type.toLocaleLowerCase(); 12 ftConfig.isDraging = false; 13 switch (type) { 14 case \'card\': 15 c = { 16 id: \'region\' + ftConfig.regNum, 17 title: \'卡片区域\' + ftConfig.regNum, 18 type: type, 19 cols: 4, //默认为卡片区域设置4列 20 minHeight: 100, 21 border: true, 22 collapsible: true, 23 bodyPadding: \'5 20px 5 0\', 24 margin: \'0px 0px 5px 0\', 25 layout: \'column\', 26 closable: true, 27 defaults: { labelAlign: \'right\', labelWidth: 100, margin: \'3,0\' } 28 }; break; 29 case \'table\': 30 c = { 31 id: \'region\' + ftConfig.regNum, 32 title: \'表格区域\' + ftConfig.regNum, 33 type: type, 34 xtype: \'grid\', 35 height: 200, 36 margin: \'0px 0px 5px 0\', 37 collapsible: true, 38 autoScroll: true, 39 closable: true, 40 columns: {} 41 }; break; 42 case \'mixed\': 43 c = { 44 id: \'region\' + ftConfig.regNum, 45 title: \'混合区域\' + ftConfig.regNum, 46 type: type, 47 border: true, 48 collapsible: true, 49 closable: true, 50 minHeight: 100, 51 bodyPadding: \'10px\', 52 margin: \'0px 0px 5px 0\' 53 }; break; 54 default: 55 c = { 56 id: newID(\'ct\'), 57 index: ftConfig.ctrolNum, 58 type: type, 59 xtype: type, 60 fieldLabel: \'控件\' 61 }; break; 62 } 63 dropId = e.target.id.split(\'-\')[0]; 64 dropId = dropId === \'gridview\' ? e.target.parentNode.id.split(\'-\')[0] : dropId; 65 return addRegionControl(dropId, c); 66 }
notifyDrop function
1 //添加控件到区域 2 function addRegionControl(pid, c) { 3 var p = findRegion(pid); 4 if (!p) return false; 5 if (ftConfig.panelType.indexOf(c.type) >= 0 && p.type !== \'mixed\') {//如果是区域控件就只能放在mixed类型panel里面; 6 p = p.findParentByType(\'panel\'); 7 if (p) { 8 return addRegionControl(p.id, c); 9 } 10 return false; 11 } 12 else if (ftConfig.panelType.indexOf(c.type) < 0) { 13 if (p.type === \'mixed\') {//如果是其他控件就不能放到mixed类型panel里面; 14 return false; 15 } 16 else if (p.type === \'table\') {//如果是控件添加到表格区域的处理 17 var index = p.columns.length + 1; 18 p.addColumn({ text: \'列\' + index, width: 120, cls: "center", align: \'left\' }); 19 } 20 else {//(p.type === \'card\') 如果是添加控件到卡片区域的处理 21 c.columnWidth = 1 / p.cols; 22 p.add(c); 23 } 24 } 25 else { 26 p.add(c); 27 } 28 ftConfig.ptype.indexOf(c.type) >= 0 ? ftConfig.regNum++ : ftConfig.ctrolNum++; 29 return true; 30 } 31 //根据Id查找区域的可用控件或者父级控件 32 function findRegion(id) { 33 if (!id || !(c = Ext.getCmp(id))) 34 return null; 35 if (c.type && ftConfig.panelType.indexOf(c.type) >= 0) { 36 return c; 37 } 38 else { 39 var p = c.findParentByType(\'panel\'); 40 if (p) { 41 return findRegion(p.id); 42 } 43 return null; 44 } 45 }
add control process
通过上面的拖放处理逻辑我们已经可以初步的设计表单模板了,下面附上4张图片操作效果图:
图一
图二
图三
图四
大家可以看看拖放前后四张图的区别。
至此我们实现了设计器最重要的一步——拖拽控件,好吧这一节就先到这里。。。洗洗睡了。