Summary of usage of ExtJS (4)--drag-and-Drop and pop-up windows

This chapter briefly introduces the simple application of drag-and-drop and pop-up windows. I. Drag and Drop

Drag-and-drop in the Ext component system occupies a very important position, many components are encapsulated in the implementation of the drag-and-drop function, this section mainly discusses the drag-and-drop component structure and examples, focusing on the use of the EXT.DD package to implement the drag-and-drop function, rather than with other components 1.1 Use Range

(1) You can drag and drop the rows in the form so that they are arranged in the specified way

(2) You can drag and drop nodes in a tree and drag nodes from one branch to another.

(3) between the table and the tree can also be drag-and-drop

(4) Layout of the split is also a drag-and-drop

(5) Resize is also a drag-and-drop, changing size. 1.2 Simple Applications

For b/S system, drag and drop has been a very rarely used function, we always think that the implementation of drag-and-drop function is very complex, in fact, in Ext, as long as a small number of code can be implemented, as shown in the following code:

Ext.onready (function () {New Ext.dd.DDProxy (' block ');});

The code for the corresponding HTML section is as follows:

<div id= "block" style= "background:red;" mce_style= "background:red;" > </div> 1.3 Another example

Let's look at the detailed code first:

(1) First is to define the part of the drag and drop, the specific code is:

var proxy=new Ext.dd.DragSource (' proxy ', {group: ' DD '});

(2) Target tells us where to put the above proxy burglar, such as the following code:

var target=new Ext.dd.DDTarget (' target ', ' DD ');

(3) Note: The two have the same ' DD ', which is the grouping flag, used to limit the destination of drag and drop, only the same group name of the destination can receive it.

(4) However, this only implements the drag-and-drop function, without any effect, the following code can be implemented, drag the proxy to the specified area, and stay in the area, as shown below:

Proxy.afterdragdrop=function (target,e,id) {var destel=ext.get (id); var srcel=ext.get (Proxy.getel ()); Srcel.insertbefore (Destel);  }; second, pop-up windows

From the appearance of speaking, the browser with the alert, confirm, prompt and other dialog boxes are not good-looking, and configuration is not flexible. such as the button to add, delete, and modify the button triggered by the event is very difficult to perform, and in the Ext MsgBox can be implemented, and the appearance is quite beautiful, this section will detail the pop-up window in ext. the use method of 2.1 Ext.messagebox

Ext.messagebox provides us with a simple way to pop up a balloon, using the alert, confirm, prompt dialog boxes that it offers to replace the browser's native alert, confirm, and Prompt Deng dialog box. Ext.messagebox also provides more functionality, such as a progress bar.

1, the Ext.MessageBox.alert () the use method and the effect chart (Figure 1)

Ext.MessageBox.alert (' title ', ' content ', function (BTN) {alert (' You just clicked ' +btn);};

Figure 1 Alert effect Chart

2, the Ext.MessageBox.confirm () the use method and the effect chart (as shown in Figure 2)

Ext.MessageBox.confirm (' Select box ', ' Do you choose Yes or no? ', function (BTN) {alert (' You just selected ' +btn ');

Fig. 2 Confirm Effect Chart

3, the Ext.MessageBox.prompt () the use method and the effect chart (as shown in Figure 3)

Ext.MessageBox.prompt (' Input box ', ' casually enter something ', function (btn,text) {alert (' You just clicked ' +btn+ ', just entered the ' +text ');

Fig. 3 Prompt Effect Chart 2.2 More configurations for dialog boxes

1, you can enter multiple lines of the input box

First, we modify the original prompt function to change the text box that can only receive a single line of string data into a form that supports multiple lines of text, and the relevant code as well as the effect diagram below.

Ext.MessageBox.show ({title: ' Multiline Input box ', msg: ' Can enter multiple lines: ', width:300, Buttons:Ext.MessageBox.OKCANCEL, Multiline:true, fn: function (btn,text) {alert (' You just clicked ', btn+ ', just entered "+text);}}";

Figure 4 Multi-line Input effect Chart

2, Customize the dialog box button

We can use the Ext.Message.show () to set the style of the button in the dialog box, as shown in the following code.

Ext.MessageBox.show ({title: Button for custom dialog box, msg: ' Select one from three buttons ', Buttons:Ext.MessageBox.YESNOCANCEL, Fn:function (BTN) { Alert (' You just clicked on ' +btn '); } });

Figure 5 Custom Buttons

3. Progress bar

The progress bar is often used for scenarios that require a user to wait for an action to be completed, and when it is time consuming to perform a time-consuming operation, we need to use it to prompt the user for patience, Ext.messagebox provides us with the default progress bar, as long as the progress parameter is set to True, the progress bar appears in the dialog box, as shown in the following code:

Ext.MessageBox.show ({title: ' Please wait ', msg: ' Read the data ... ', width:240, Progress:true, closable:false});

Figure 6 General progress bar

Although we have got the progress bar, but its progress status does not change, we need to call the Ext.MessageBox.updateProgree () function to let the progress bar state change, usually, we will use closable: False to hide the Close button in the upper-right corner of the dialog box, preventing the user from turning off the progress bar.

Now, we add the update progress bar to the above function, we use the timeout timer to modify the progress bar, the progress bar status will change over time, 10 seconds after the entire progress Bar dialog box will be hidden. The key code is as follows:

Ext.MessageBox.show ({title: ' Please wait ', msg: ' Read the data ... ', width:240, Progress:true, closable:false}); var f=function (v) {return function () {if (v==11) {Ext.MessageBox.hide ();} else{Ext.MessageBox.updateProgress (V/10, ' is reading the first ' +v+ ', altogether 10. '); } }; }; for (Var i=1;i<12;i++) {settimeout (f (i), i*1000);}

Figure 7 progress bar with update function

In addition to the progress bar, which can be used to control progress accurately, we can also use an automatically changing progress bar cue box, where the progress bar in the pop-up dialog will be pushed forward automatically, but we cannot precisely control the value of the progress bar as long as the Ext.MessageBox.wait () is used.

Ext.MessageBox.show ({title: ' Please wait ', msg: ' Read the data ... ', width:240, Progress:true, closable:false}); Ext.MessageBox.wait ();

4, animation effect

We can set the pop-up and close animation effect for the dialog box, use the Animel parameter to specify an HTML element, the dialog box will play the pop-up and the closed animation according to the HTML element. We modify the previous code and add the Animel parameter to animate the effect, as shown in the following code:

Ext.MessageBox.show ({title: Button for custom dialog box, msg: ' Select one from three buttons ', Buttons:Ext.MessageBox.YESNOCANCEL, Fn:function (BTN) { Alert (' You just clicked on ' +btn '); }, Animel: ' Dialog '});

The value of the Animel parameter is a string that corresponds to the ID of an element in HTML, such as <div id= "dialog" ></div>. Based on the ID of this element, we create a dialog box to know which elements play the pop-up and closed animation.

In addition to the basic application of Ext.messagebox, the actual use of the need to pay attention to some points:

(1) In order to simplify the call, we can write the Ext.messagebox directly into ext.msg

(2) We use Ext.messagebox pop-up dialog boxes are based on the same internal Ext.window instance, so we can not use Ext.messagebox pop-up multiple dialog boxes, the result is that the page will only display the last window