This chapter briefly introduces the simple application of drag-and-drop and pop-up windows.
1. Drag and DropDrag-and-drop plays an important role in the ext component system. Many components encapsulate the implementation of the drag-and-drop function. This section describes the structure and examples of drag-and-drop components, the focus is to use Ext. the DD package implements the drag-and-drop function, instead of combining it with other components.
1.1 Scope of use(1) You can drag and drop rows in a table to arrange them in the specified way.
(2) You can drag and drop nodes in the tree to drag a node from one branch to another.
(3) drag and drop between tables and trees
(4) the split of the layout is also a drag-and-drop operation.
(5) Resize is also a drag-and-drop operation to change the size.
1.2 simple applicationFor the B/S system, drag-and-drop has always been a rarely used function. We always think that the drag-and-drop function is very complicated. In fact, it can be implemented with only a small amount of code in ext, as shown in the following code:
Ext. onready (function () {<br/> New Ext. dd. ddproxy ('block'); <br/> });
The corresponding HTML code is as follows:
<Div id = "Block" style = "Background: red;" mce_style = "Background: red;"> </div>
1.3 another instanceLet's first look at the detailed code:
<HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead id = "head1" runat = "server"> <br/> <title> drag and drop effect </title> <br /> <LINK rel = "stylesheet" type = "text/CSS" href = ".. /resources/CSS/ext-all.css "mce_href =" Resources/CSS/ext-all.css "/> <br/> <MCE: Script Type =" text/JavaScript "src = ".. /adapter/EXT/ext-base.js "mce_src =" adapter/EXT/ext-base.js "> </MCE: SCRIPT> <br/> <MCE: script Type = "text/JavaScript" src = "../ Ext-all.js "mce_src =" ext-all.js "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> Ext. onready (function () {<br/> // new Ext. DD. ddproxy ('block'); <br/> var proxy = new Ext. DD. dragsource ('proxy', {group: 'dd'}); </P> <p> proxy. afterdragdrop = function (target, E, ID) {<br/> var destel = ext. get (ID); <br/> var srcel = ext. get (proxy. getel (); <br/> srcel. insertbefore (destel); <br/>}; </P> <p> var target = new Ext. DD. ddtarget ('target', 'dd'); <br/>}); </P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "proxy"> item </div> <br/> <HR /> <br/> <Div id = "target"> <br/> <HR/> <br/> </div> <br/> </body> <br /> </ptml>
(1) first, define the drag-and-drop part. The specific code is:
VaR proxy = new Ext. dd. dragsource ('proxy', {group: 'dd '});
(2) Target tells us where we can protect the Proxy from theft, as shown in the following code:
VaR target = new Ext. dd. ddtarget ('target', 'dd ');
(3) Note: there is the same 'dd' between the two. This is a group sign, used to restrict the drag-and-drop destination. Only the destination with the same group name can receive it.
(4) However, this can only implement the drag-and-drop function, without any effect. The following code can implement the drag-and-drop proxy to the specified region and stay in the region, as shown below:
Proxy. afterdragdrop = function (target, E, ID) {<br/> var destel = ext. get (ID); <br/> var srcel = ext. get (proxy. getel (); <br/> srcel. insertbefore (destel); <br/> };
Ii. pop-up windowIn terms of appearance, the alert, confirm, prompt and other dialogs provided by the browser are not nice-looking, and the configuration is not flexible. Operations such as button addition, deletion, and event triggered by button modification are very difficult to execute, and can be implemented in ext msgbox, And the appearance is quite beautiful, this section details the pop-up window in ext.
2.1 Ext. MessageBox usageExt. messageBox provides us with a simple method to pop up a prompt box. The alert, confirm, prompt and other dialogs provided by MessageBox can completely replace the native alert, confirm, and prompt dialog boxes of the browser. In addition, ext. messageBox also provides more functions such as progress bars.
1. Use Ext. MessageBox. Alert () and (figure 1)
Ext. messageBox. alert ('title', 'content', function (BTN) {<br/> alert ('you just clicked '+ Btn); <br/> });
Figure 1 alert
2. Use Ext. MessageBox. Confirm () and (2)
Ext. MessageBox. Confirm ('selection box', 'Do you choose yes or no? ', Function (BTN) {<br/> alert (' You just selected '+ Btn); <br/> });
Figure 2 confirm
3. Use Ext. MessageBox. Prompt () and (3)
Ext. messageBox. prompt ('input box ', 'enter something casually', function (BTN, text) {<br/> alert ('you just clicked '+ Btn + ", just entered "+ text); <br/> });
Figure 3 prompt
2.2 more configurations in the dialog box1. You can enter multiple input boxes.
First, we modify the original prompt function to modify the text box that can only receive single-line string data to support multi-line text. The relevant code is as follows.
Ext. messageBox. show ({<br/> title: 'multiline input box', <br/> MSG: 'multiple rows can be entered:', <br/> width: 300, <br/> buttons: ext. messageBox. okcancel, <br/> multiline: True, <br/> FN: function (BTN, text) {<br/> alert ('you just clicked ', BTN + ", just entered "+ text); <br/>}< br/> });
Figure 4 multi-line Input
2. buttons in the Custom dialog box
You can use Ext. Message. Show () to set the button style in the dialog box, as shown in the following code.
Ext. messageBox. show ({<br/> title: 'button in the Custom dialog box ', <br/> MSG:' select one of the three buttons, <br/> buttons: ext. messageBox. yesnocancel, <br/> FN: function (BTN) {<br/> alert ('you just clicked '+ Btn ); <br/>}< br/> });
Figure 5 Custom button
3. Progress bar
Progress bars are often used in scenarios where you need to wait for an operation to complete. When you perform some very time-consuming operations, we need to use them to prompt the user to wait patiently, ext. messageBox provides a default progress bar. If you set the progress bar parameter to true, a progress bar will appear in the dialog box, as shown in the following code:
Ext. MessageBox. Show ({<br/> title: 'Please wait ', <br/> MSG:' reading data ...... ', <Br/> width: 240, <br/> progress: True, <br/> closable: false <br/> });
Figure 6 general progress bar
Although we have obtained a progress bar above, its progress status will not change. We need to call ext. messageBox. the updateprogree () function changes the progress bar status. Generally, closable: false is used to hide the close button in the upper-right corner of the dialog box, so that you are prohibited from turning off the progress bar.
Now, we add the update progress bar function. We use the timeout timer to modify the progress bar. The progress bar status changes over time. After 10 seconds, the entire progress bar dialog box is hidden. The key code is as follows:
Ext. MessageBox. Show ({<br/> title: 'Please wait ', <br/> MSG:' reading data ...... ', <Br/> width: 240, <br/> progress: True, <br/> closable: false <br/> }); </P> <p> var F = function (v) {<br/> return function () {<br/> If (V = 11) {<br/> Ext. messageBox. hide (); <br/>}else {<br/> Ext. messageBox. updateprogress (V/10, 'reading the '+ V +', a total of 10. '); <Br/>}< br/>}; <br/> for (VAR I = 1; I <12; I ++) <br/>{< br/> setTimeout (f (I), I * 1000); <br/>}
Figure 7 progress bar with update function
In addition to this progress bar that can accurately control the progress, we can also use an automatic change progress bar prompt box, you only need to use Ext. messageBox. wait (). The progress bar in the pop-up dialog box will automatically push forward, but we cannot precisely control the value of the progress bar.
Ext. MessageBox. Show ({<br/> title: 'Please wait ', <br/> MSG:' reading data ...... ', <Br/> width: 240, <br/> progress: True, <br/> closable: false <br/>}); <br/> Ext. messageBox. wait ();
4. animation effect
You can set the pop-up and closed animation effects for the dialog box. You can use the animel parameter to specify an HTML element. Then, the dialog box will play the pop-up and closed Animation Based on the specified HTML element. We modified the previous Code and added the animel parameter to achieve the animation effect, as shown in the following code:
Ext. messageBox. show ({<br/> title: 'button in the Custom dialog box ', <br/> MSG:' select one of the three buttons, <br/> buttons: ext. messageBox. yesnocancel, <br/> FN: function (BTN) {<br/> alert ('you just clicked '+ Btn); <br/> }, <br/> animel: 'Dialog '<br/> });
The animel parameter value is a string that corresponds to the ID of an element in HTML, for example, <Div id = "dialog"> </div>. Based on the element ID, the created dialog box knows which element to play the pop-up and closed Animation Based on.
In addition to the basic application of Ext. MessageBox, pay attention to the following points during actual use:
(1) to simplify the call, we can directly write Ext. MessageBox as Ext. msg
(2) We use Ext. the MessageBox pop-up dialog box is based on the same internal Ext. window instance, so we cannot use Ext. multiple dialog boxes are displayed in MessageBox. As a result, only the last window is displayed on the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
