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

首页 > 代码库 > 基于Extjs的web表单设计器第四节——控件拖放

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

2024-11-19 16:44:02 202人阅读

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

　　通过前面的介绍知道，我们的区域类型的容器控件有三种：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     }