Section 3 of Extjs-based web form designer-Drag and Drop controls

Section 3 of Extjs-based web form designer-Drag and Drop controls
Friends who have read the designer should be impressed. They may find that the UI design layout of our designer is similar to the design interface of Visual studio, which uses the layout of the Left, center, and right areas. The left side is the control area, the middle is the canvas area of the form, and the right side is the attribute area. This uidesign must support the drag-and-drop Design of controls. You only need to drag a control to our canvas, then the canvas should immediately see the position, size, and default information of the drag-and-drop control in the canvas. Needless to say, this design is more direct and convenient for users in terms of Operation Experience and design senses, because in the design phase, I can know What I see is what I get when the design form is running in the system ). Compared with our 1.0 designer, this design should be greatly improved. You must know that in the 1.0 era, our designer is a pop-up box, in the drop-down control list in the pop-up box, select the control type and configure other xx attributes ...... then all the controls are displayed in a grid list, so you do not know what the form looks like. You also need to use the preview function to view the form. Since we want to adopt a method similar to VS designer, we must solve some important problems. First, you must support the drag-and-drop Design of controls, that is, when the user enters our designer interface, after selecting a control on the left side, you can drag and drop it to the "specified" Area of the canvas in the middle of our Designer (note that it is a specified position, not by the way ). Then, the control types supported by different regions may be different, so we must limit which controls can be supported by each type of region control. That is, when a zone-supported control is dragged to our zone and the mouse is released, our zone must accept the control, if it is not supported, drag and drop the control to our region and release the mouse, our region control will not have any response. Controls in the same region support random positions. You can drag and drop controls in a region to change the positions of controls. We can drag and drop controls between regions. For example, we can move controls in area A to area B. That is, controls can be exchanged between regions at will. The problems above are the problems that must be solved by using the drag-and-drop Form Designer. How can we solve them? By studying the extjs API, we can find that for the extjs treepanel control, we add a treeviewdragdrop plug-in its view that supports drag-and-drop of Tree nodes, the implementation code is as follows: (compare the differences between Ext.net Writing Method and extjs writing method. in fact, they are essentially the same, Ext. net code generated after being parsed by the server is almost the same as the code written in pure extjs. Only Ext. net pair.. Net developers are more convenient and familiar with it .) 1 <ext: treePanel ID = "controlRegion" Title = "Form Control" runat = "server" Region = "West" RootVisible = "false" 2 Width = "200" Split = "true" Collapsible = "true" Collapsed = "false"> 3 <Store> 4 ........................... slightly 5 </Store> 6 <Root> 7 ........................... 8 </Root> 9 <View> 10 <ext: TreeView ID = "TreeView1" runat = "server"> 11 <Plugins> 12 <ext: TreeViewDragDrop runat = "Server" EnableDrop = "true" DragGroup = "tree2div"/> 13 </Plugins> 14 </ext: TreeView> 15 </View> 16 </ext: treePanel> Ext. create ("Ext. tree. panel ", {store :{//......... omitted}, id: "TreePanel1", width: 200, region: "west", split: true, collapsible: true, title: "form control", viewConfig: {id: "TreeView2", plugins: [{ptype: "treeviewdragdrop", dragGroup: "tree2div"}], xtype: "treeview"}, root: {//......... omitted }, RootVisible: false}) copy the code. Please note that the Code contains the treeviewdragdrop part. Adding it indicates that our tree node can support drag and drop, but this is far from enough. We must also provide code for the canvas of our designer to receive drag and drop functions. Here we provide code for the canvas area and code that supports drag and drop on the canvas. In our designer code, add a canvas panel. In combination with the introduction in the previous chapter, we should know that our canvas is actually a Mixed type Mixed area control. 1 <ext: panel ID = "mainPanel" runat = "server" Region = "Center" ButtonAlign = "Center" Border = "true" 2 BodyPadding = "10" OverflowY = "Auto"> 3 <customConfig> 4 <ext: configItem Name = "type" Value = "Mixed" Mode = "Value"/> 5 </CustomConfig> 6 </ext: panel> then we use a Droptarget to add the functions of controls that can receive and drag release to our canvas. <ext: dropTarget ID = "ddt" runat = "server" Target = "mainPanel" Group = "tree2div" IgnoreSelf = "false"> <policydrop Fn = "policydrop "/> <Policyenter Handler =" ftConfig. isDraging = true; "/> </ext: DropTarget> note that the group attribute value in droptarget is tree2div, this value must be consistent with the DragGroup attribute value of treeviewdragdrop we added to treepanel. Otherwise, it cannot work normally. So far, we have only solved the problem of drag-and-drop on Tree nodes, and our mainpanel canvas supports drag-and-drop controls. However, we have to design and define how to deal with drag-and-drop controls on the canvas and controls that can be received by each regional control. The specific design and implementation should be kept in the next section.