接着上一节介绍控件拖放的设计。

  通过前面的介绍知道,我们的区域类型的容器控件有三种: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张图片操作效果图:

图一

图二

图三

图四

大家可以看看拖放前后四张图的区别。

至此我们实现了设计器最重要的一步——拖拽控件,好吧这一节就先到这里。。。洗洗睡了。

基于Extjs的web表单设计器 第四节——控件拖放的更多相关文章

  1. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  2. 基于Extjs的web表单设计器 第六节——界面框架设计

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  3. 基于Extjs的web表单设计器 第五节——数据库设计

    这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web ...

  4. 基于Extjs的web表单设计器 第三节——控件拖放

    看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性 ...

  5. 基于Extjs的web表单设计器

    由于这样工作和自身的一些原因很长一段时间没有写过博客了.最近想把自己前面一段时间搞出的一个表单设计器的相关经验或者经历记录下来.分享给大家,也算是对自己前2个月的一个总结回顾吧. 首先介绍一下开发此版 ...

  6. 基于Extjs的web表单设计器 第一节

    前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...

  7. 基于Extjs的web表单设计器 第二节——表单控件设计

    这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基 ...

  8. YbSoftwareFactory 代码生成插件【十六】:Web 下灵活、强大的审批流程实现(含流程控制组件、流程设计器和表单设计器)

    程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大 ...

  9. .net web 开发平台- 表单设计器 一(web版)

    如今为了适应需求的不断变化,动态表单设计器应运而生.它主要是为了满足界面的不断变化和提高开发速度.比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动 ...

随机推荐

  1. ASP.NET中树型DropDownList的绑定

    首先设计好数据库,假设数据库有三个字段Id,ParentId,Name.ParentId是树性结构必须的,就是节点的父节点id,假设跟节点id都是0.下面就可以绑定了! 思路应该很简单,就是先绑定根节 ...

  2. Opencv Cookbook阅读笔记(四):用直方图统计像素

    灰度直方图的定义 灰度直方图是灰度级的函数,描述图像中该灰度级的像素个数(或该灰度级像素出现的频率):其横坐标是灰度级,纵坐标表示图像中该灰度级出现的个数(频率). #include <open ...

  3. Coursera台大机器学习技法课程笔记03-Kernel Support Vector Machine

    这一节讲的是核化的SVM,Andrew Ng的那篇讲义也讲过,讲的也不错. 首先讲的是kernel trick,为了简化将低维特征映射高维特征后的计算,使用了核技巧.讲义中还讲了核函数的判定,即什么样 ...

  4. ssh面试题

    ssh面试题  创建时间: 2015-8-12 22:37 来源: http://wenku.baidu.com/link?url=cw1B46f98hAde0kmr3J-wv7PpklZJRmf6I ...

  5. MySQL 如何只导出 指定的表 的表结构和数据 ( 转 )

    MySQL 如何只导出 指定的表 的表结构和数据 ( 转 ) 2011-01-04 15:03:33 分类: MySQL MySQL 如何只导出 指定的表 的表结构和数据 导出更个库的表结构如下:my ...

  6. Android 返回桌面的Intent

    Intent MyIntent = new Intent(Intent.ACTION_MAIN); MyIntent.addCategory(Intent.CATEGORY_HOME); startA ...

  7. Deeplink做不出效果,那是你不会玩!

    最近魔Sir听一些有些同学说之前用过Deeplink,但效果并没有想象中的那么好,在了解了小伙伴的使用场景后,魔Sir觉得有必要出这么篇东西告诉大家,Deeplink效果差,那是因为你不会玩! 对于已 ...

  8. std::map常用方法

    map<string, int> Employees; Employees["Mike C."] = 12306; Employees.insert(make_pair ...

  9. [Android Pro] sqlite数据库的char,varchar,text,nchar,nvarchar,ntext的区别

    reference : http://blog.csdn.net/xingfeng0501/article/details/7817121 1.CHAR.CHAR存储定长数据很方便,CHAR字段上的索 ...

  10. javascript类的类比详解-大白话版

    转载请注明出处:水车 如果有误,还望指出,谢谢 -----------------正文分割线---------------------- 类:类太抽象,要想弄明白就该用现实的东西来类比 在我看来类就是 ...