看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左、中、右三个区域布局。左侧为控件区域、中间为表单的画布设区域、右侧为属性区域。这样的UI设计肯定就得支持控件的拖拽设计,用户只要拖放一个控件到我们的画布上,那么画布就应该立即能够看到我们拖放的控件在画布中的位置、大小、以及一些控件自带的默认信息。不用说这样的设计对于用户来说不论在操作体验上还是设计的感官上都更加直接和方便,因为我在设计阶段就可以知道我设计后的表单在系统运行时候的样子(What i see is what i get)。这个设计相对于我们1.0版本的设计器来说应该是很大的进步,要知道在1.0时代我们的设计器可是一个通过弹出框,然后在弹出框的下拉控件列表去选择控件类型,然后配置其他的xx属性......然后所有控件显示到一个grid列表中的,用户更不不知道这个表单是什么样子,还需要借助预览功能才能查看表单的样子。

  我们的设计器既然要采用类似VS设计器的方式,那么我们也就必须解决一些比较重要的问题。

  1. 首先来说就是必须要支持控件的拖拽设计,也就是当用户进入我们的设计器界面,选择了左侧的某个控件后能够拖放到我们设计器的中间画布“指定”区域(注意是指定的位置,不是顺便一个位置)。
  2. 然后就是不同区域支持的控件类型可能不一样,那么我们就必须限定每个类型的区域控件能够支持哪些控件。也就是当一个被区域支持的控件拖放到我们的区域上面并释放鼠标后那么我们的区域就得接受该控件,如果是不被支持的控件拖放到我们的区域上面并释放鼠标后我们的区域控件不会有任何响应。
  3. 同一个区域内部的控件支持随意的交换位置,用户可在一个区域内部通过拖放控件来改变控件的位置。
  4. 我们的区域之间能够支持控件的拖放,比如将一个A区域的控件移动到B区域中区。也就是区域之间可以随意交换控件。

上面的几个问题是我们采用拖拽式表单设计器必须解决的问题,如何解决呢?通过研究extjs API 我们可以发现,对于extjs treepanel类型控件我们在它的view里面添加一个支持树节点拖放的treeviewdragdrop插件,实现代码如下:(请对比Ext.net 的写法和 纯extjs的写法上的区别.其实它们本质上是一样的,Ext.Net的代码在经过服务器解析之后生成的代码其实和纯extjs写的代码几乎一样。只是Ext.Net对.Net开发人员来说使用起来更方便,更熟悉,仅此而已.)

  <ext:TreePanel ID="controlRegion" Title="表单控件" runat="server" Region="West" RootVisible="false"
Width="200" Split="true" Collapsible="true" Collapsed="false">
<Store>
...........................略
</Store>
<Root>
...........................略
</Root>
<View>
<ext:TreeView ID="TreeView1" runat="server">
<Plugins>
<ext:TreeViewDragDrop runat="server" EnableDrop="true" DragGroup="tree2div" />
</Plugins>
</ext:TreeView>
</View>
</ext:TreePanel>

Ext.Net 写法

Ext.create("Ext.tree.Panel",
{
store: { //.........略 },
id: "TreePanel1",
width: 200,
region: "west",
split: true,
collapsible: true,
title: "表单控件",
viewConfig: {
id: "TreeView2",
plugins: [
{
ptype: "treeviewdragdrop",
dragGroup: "tree2div"
}
],
xtype: "treeview"
},
root: { //.........略 },
rootVisible: false
})

extjs 写法

  请注意代码中的包含treeviewdragdrop部分的代码,它的加入表示我们的树节点可以支持拖放了,但是仅仅这样还是远远不够的。我们还必须为我们设计器的画布提供接收拖放功能的代码,这里我们给出画布区域的代码和对画布支持拖放的代码。

我们的设计器代码中加入一个画布的panel ,结合前面一章节的介绍大家应该知道我们的画布其实是一个Mixed类型的混合区域控件。

 <ext:Panel ID="mainPanel" runat="server" Region="Center" ButtonAlign="Center" Border="true"
BodyPadding="10" OverflowY="Auto">
<CustomConfig>
<ext:ConfigItem Name="type" Value="Mixed" Mode="Value" />
</CustomConfig>
</ext:Panel>

然后我们使用一个Droptarget来为我们的画布添加可以接收拖动释放的控件的功能

 <ext:DropTarget ID="ddt" runat="server" Target="mainPanel" Group="tree2div" IgnoreSelf="false">
<NotifyDrop Fn="notifyDrop" />
<NotifyEnter Handler="ftConfig.isDraging=true;" />
</ext:DropTarget>

在这里注意一个地方就是在droptarget里面的group属性值为tree2div,这个值和我们前面给treepanel添加的treeviewdragdrop 的DragGroup属性值是必须一致的,不然是不能正常工作的。到目前为止我们其实仅仅解决了树的节点可以拖放,以及我们的mainpanel画布支持接受拖放过来的控件。但是我们的画布如何处理拖放过来的控件,以及每种区域控件可以接收的控件等等功能还得我们去设计和定义,具体的设计以及实现留到下一节吧。

基于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表单设计器 第二节——表单控件设计

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

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

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

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

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

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

    接着上一节介绍控件拖放的设计. 通过前面的介绍知道,我们的区域类型的容器控件有三种:Card.Table.Mixed. Card 可以支持几乎所有的常用控件,包括:文本TextField.多文本Tex ...

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

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

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

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

随机推荐

  1. spring mvc(前置控制器)(转载)

    (此文转载:http://www.cnblogs.com/brolanda/p/4265749.html) 一.前置控制器配置与讲解 上篇中理解了IOC容器的初始化时机,并理解了webApplicat ...

  2. Linux LVM学习总结&mdash;&mdash;删除物理卷

    本篇介绍LVM管理中的命令vgreduce, pvremove.其实前面几篇中以及有所涉及. vgreduce:通过删除LVM卷组中的物理卷来减少卷组容量.注意:不能删除LVM卷组中剩余的最后一个物理 ...

  3. python Gunicorn

    1. 简介 Gunicorn(Green Unicorn)是给Unix用的WSGI HTTP 服务器,它与不同的web框架是非常兼容的.易安装.轻.速度快. 2. 示例代码1 def app(envi ...

  4. Spark(2) - Developing Application with Spark

    Exploring the Spark shell Spark comes bundled with a PERL shell, which is a wrapper around the Scala ...

  5. PHP 下载文件时自动添加bom头的方法

    首先弄清楚,什么是bom头?在Windows下用记事本之类的程序将文本文件保存为UTF-8格式时,记事本会在文件头前面加上几个不可见的字符(EF BB BF),就是所谓的BOM(Byte order ...

  6. js中的计时器

    在JS中做二级菜单时,被一个鼠标移出时隐藏的小问题困扰了很久. <script> function Menu(id){ var _this=this; this.obj=document. ...

  7. lightoj 1013

    思路:动态规划.设dp[i][j][k]表示用第一个串的前i隔字符和第二个串的前k隔字符组成长度为i的串的个数,那么:若s1[j+1] == s2[k+1] dp[i+1][j+1][k+1] += ...

  8. 基于cygwin构建u-boot(三)make错误忽视

    接上文,修改gcc 的-std标准后,.depend文件处理仍然出现了错误: 五.错误:make中命令报错(sed找不到需要的文件) 错误告警如下: make -C examples/api all ...

  9. 【MySQL】20个经典面试题,全部答对月薪10k+

    Part2:经典题目 1.MySQL的复制原理以及流程 基本原理流程,3个线程以及之间的关联: 2.MySQL中myisam与innodb的区别,至少5点 (1).问5点不同: (2).innodb引 ...

  10. java设计模式------工厂设计模式

    总结 以上就是工厂模式的基本实现和详细说明.包括了简单工厂模式.工厂方法模式.抽象工厂模式.我们可以基于需求来选择合适的工厂模式 基本概念:为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来 ...