ExtJS-based Web Form Designer Section three--control drag and drop

Friends who have seen the designer before should have an impression that our designer UI design layout is actually similar to the Visual Studio design interface, with the left, middle, and right three regional layouts. The left side is the control area, the canvas area for the form, and the property area on the right. This UI design must support the drag-and-drop design of the control, and the user simply drags and puts a control onto our canvas, and the canvas should immediately be able to see the position, size, and default information of the controls that we drag and drop in the canvas. Needless to say, this design is more direct and convenient for the user, both in terms of the experience of the operation and the senses of design, because I can tell at the design stage how the form I've designed is going to look like when the system is running. This design should be a lot of progress for our 1.0 version of the designer, to know that in the 1.0 era our designer is a popup box, and then in the pop-up box drop-down CONTROL list to select the control type, and then configure the other XX properties ... Then all the controls appear in a grid list, and the user doesn't know what the form looks like, and the preview feature is needed to see what the form looks like.

Now that our designers are using a similar vs designer approach, we have to address some of the more important issues.

1. First of all, it is necessary to support the drag design of the control, that is, when the user enters our designer interface, select a control on the left to be able to drag and drop into our designer's middle canvas "specify" area (note is the specified location, not by the way).
2. Then the types of controls supported by the different regions may not be the same, so we have to qualify which controls each type of zone control can support. That is, when a control that is supported by a zone is dragged and dropped onto our area and the mouse is released, then our region has to accept the control, and if the unsupported control is dragged over our area and the mouse is released, our area control will not respond.
3. Controls within the same region support arbitrary swap locations, where users can change the position of a control by dragging and dropping controls within a region.
4. We can support drag-and-drop of controls between regions, such as moving a control of a zone to the B zone Central. This means that the control can be exchanged freely between regions.

Some of the above questions are the problems that we have to solve by using the drag-and-drop form designer. By studying the ExtJS API we can find that for ExtJS Treepanel type Control we add a Treeviewdragdrop plugin that supports tree node drag and drop in its view, implementing the Code as follows: (Compare the notation of ext.net and The difference in the writing of pure ExtJS. In fact, they are essentially the same, ext.net code is generated after the server resolves the code is almost the same as the pure ExtJS write code. It's just that ext.net is easier and more familiar to. NET developers.

1  <Ext:treepanelID= "Controlregion"Title= "Form Control"runat= "Server" Region= "West"rootvisible= "false"2 Width= "$"Split= "true"Collapsible= "true"collapsed= "false">3                 <Store> 4                   ........................... Slightly5                 </Store>6                 <Root> 7                   ........................... Slightly8                 </Root>9                 <View>Ten                     <Ext:treeviewID= "TreeView1"runat= "Server"> One                         <Plugins> A                             <Ext:treeviewdragdroprunat= "Server"Enabledrop= "true"Draggroup= "Tree2div" /> -                         </Plugins> -                     </Ext:treeview> the                 </View> -             </Ext:treepanel>

ext.net notation

Ext.create ("Ext.tree.Panel",    {        store: {//...). A little},        ID: "TreePanel1",         width:200, Region        : "West",        Split:true,        collapsible:true,        Title: "Form Control",        viewconfig: {            id: "TreeView2",            plugins: [                {                    ptype: "Treeviewdragdrop",                    draggroup: "Tree2div"                }            ],            xtype: "TreeView"        },        root: {//.....    },        rootvisible:false    })

ExtJS notation

Notice the code in the code that contains the Treeviewdragdrop part, Its addition means that our tree nodes can support drag-and-drop, but that's just not enough. We also have to provide the code for our designer's canvas to receive drag-and-drop functionality, where we give the code for the canvas area and the code that supports drag-and-drop on the canvas.

We add a canvas panel to our designer code, and with the introduction of the previous chapter you should know that our canvas is actually a mixed type of mixed area control.

1 <Ext:panelID= "Mainpanel"runat= "Server" Region= "Center"buttonalign= "Center"Border= "true"2 bodypadding= "Ten"Overflowy= "Auto">3        <Customconfig>4            <Ext:configitemName= "type"Value= "Mixed"Mode= "Value" />5       </Customconfig>6  </Ext:panel>

Then we use a droptarget to add functionality to our canvas that can receive the controls that you drag and release.

 <Ext:droptargetID= "DDT"runat= "Server"Target= "Mainpanel"Group= "Tree2div"ignoreself= "false">        <NotifydropFn= "Notifydrop" />        <NotifyenterHandler= "ftconfig.isdraging=true;" />    </Ext:droptarget>

One place to note here is that the Group property value in DropTarget is Tree2div, and this value must be the same as the Draggroup attribute value of the treeviewdragdrop that we added earlier to Treepanel, otherwise it will not work properly. So far we've actually just solved the tree nodes can be dragged and dropped, and our Mainpanel canvas supports accepting drag-and-drop controls. But how our canvas handles the drag-and-drop controls, the controls that each zone control can receive, and so on, we're going to design and define, design and implement the next section.

ExtJS-based Web Form Designer Section three--control drag and drop