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