Extjs4 note (8) Ext. Slider scroll control, ext. progressbar progress bar control, ext. editor edit control

ArticleDirectory

• 1. Definition of the Roller Control
• 2. Obtain and set the value of the Roller Control.
• 3. effect display
• 1. Load progress bar
• 2. Waiting progress bar
• 3. Wait for the progress bar and wait for third-party events
• 4. effect display
• 1. Use a text box to edit common text
• 2. Use the drop-down list to edit

Back to the series directory

This article introduces three widgets: the scroll bar control, the progress bar control, and the editing control.

I. Definition of the Roller Control Ext. slider1. Roller Control

The following defines three roller controls with representative meanings, which respectively display the horizontal and vertical features of the roller axis, as well as single-value and multi-value selection features:

[HTML]

 
<H1> scroll Control  
 
[JS]
 

// Horizontal. The initial value is 50 var slider1 = ext. create ('ext. slider. single ', {renderto: 'slider1', width: 214, minvalue: 0, maxvalue: 100, value: 50}); // vertically, with the prompt new Ext. create ('ext. slider. single ', {renderto: 'slider2', height: 150, minvalue: 0, maxvalue: 20, vertical: True, plugins: New Ext. slider. tip ()}); // multi-value, custom prompt var slider3 = ext. create ('ext. slider. multi ', {renderto: 'slider3', width: 214, minvalue: 0, maxvalue: 20, values: [5, 12], plugins: New Ext. slider. tip ({gettext: function (Thumb) {return Ext. string. format ('current: <B> {0}/20 </B> ', thumb. value );}})});
 
 
2. Obtain and set the value of the Roller Control.
 

 
[HTML]
 

<H1> operation on the scroll Control  
 
[JS]
 

 
// Set the value of scroll 1 to 10 Ext. fly ("button1 "). on ('click', function () {slider1.setvalue (10) ;}); // obtain the value of Ext. fly ("button2 "). on ('click', function () {Ext. messageBox. alert ("Get value", "value of roller 1:" + slider1.getvalue () ;}); // set the value of roller 3 to 10, 15 Ext. fly ("button3 "). on ('click', function () {slider3.setvalue (0, 10); slider3.setvalue (1, 15) ;}); // gets the ext set of values for Roller 3. fly ("button4 "). on ('click', function () {Ext. messageBox. alert ("Get value", "value set of roller 3:" + slider3.getvalues ());});
 
 
3. effect display
 

 
 

Ii. progress bar control Ext. progressbar1. load progress bar
 

 
[HTML]
 

 
<Div class = "content"> <button id = "button1"> RUN </button> <Div id = "p1" style = "width: 300px; "> </div> <br/>
 
 
[JS]
 

// Load the progress bar var progressbar1 = ext. create ("Ext. progressbar ", {ID:" progressbar1 ", text: 'preparing... ', renderto: 'p1'}); Ext. fly ("button1 "). on ('click', function () {// simulate the loading environment var F = function (v) {return function () {var I = V/12; progressbar1.updateprogress (I, 'Progress: '+ V +'/12'); If (V = 12) {Ext. MSG. alert ("prompt", "loaded! "); Progressbar1.reset (); // reset progress bar progressbar1.updatetext (" complete. ") ;}};}; For (VAR I = 1; I <13; I ++) {setTimeout (f (I), I * 200 );}});
 
 
2. Waiting progress bar
 

 
[HTML]
 

<Div class = "content"> <button id = "button2"> RUN </button> <Div id = "p2"> </div> <span id = "p2text"> </span> </div> <br/>
 
 
[JS]
 

// Wait for the progress bar var pbar2 = ext. create ("Ext. progressbar ", {ID:" progressbar2 ", renderto: 'p2', width: '150px '}); pbar2.on ('update', function (VAL) {// The Action Ext. fly ('p2text '). dom. innerhtml + = '>';}); Ext. fly ("button2 "). on ('click', function () {Ext. fly ('p2text '). update ('starting Windows2000: '); pbar2.wait ({interval: 200, // The Interval Duration of each update: 5000, // The length of the progress bar operation time, unit: millisecond increment: 5, // The range of each update of the progress bar, indicating that the entire process is completed The number of rounds (10 by default ). FN: function () {// The callback function executed after the progress bar is automatically updated. This function has no parameters. Ext. Fly ('p2text'). Update ('complete. ');}});});
 
 
3. Wait for the progress bar and wait for third-party events
 

 
[HTML]
 

<Div class = "content"> <button id = "button3"> RUN </button> <Div id = "P3"> </div> <span id = "p3text"> </span> </div>
 
 
[JS]
 

 
// Wait for the progress bar to stop when the third-party event ends. VaR pbar3 = ext. create ("Ext. progressbar ", {renderto: 'p3', width: '250px '}); Ext. fly ("button3 "). on ('click', function () {pbar3.wait ({interval: 100, increment: 5}); Ext. fly ('p3text '). update ('third-party event is being executed. Please wait .... '); setTimeout (function () {pbar3.reset (); Ext. fly ('p3text '). update ('execution finished. ');}, 5000 );});
 
 
4. effect display
 

 
 
3. Edit the Ext. Editor control.
 
Editing controls can be used on common HTML elements or other ext basic controls, so that these basic elements and controls can edit certain values.
 
1. Use a text box to edit common text
 
The following uses an editing control to edit the text class of a span tag. You can double-click the tag to edit the text class of the tag.
 

[HTML]
 

 
<H1> edit common text in a text box  
 
[JS]
 

 
// Use the text box to edit the common text var editor1 = new Ext. editor ({shadow: false, completeonenter: True, // when you press enter, cancelonesc: True is automatically completed, // Press ESC to automatically exit and edit updateel: True, // update ignorenochange when there is a change: true, // The listeners: {complete: function (Editor, value, oldvalue) {Ext. MSG. alert ('text changed ', "changed from" "+ oldvalue +" "to" "+ value +" ") ;}, field: {allowblank: false, xtype: 'textfield', width: 150, selectonfocus: true}); Ext. get ("span1 "). on ('dblclick', function (event, spanworkflow DOM) {editor1.startedit (spanworkflow DOM );});
 
 

 
The effect is as follows:
 

 
 

 
When editing:
 

 
 
2. Use the drop-down list to edit
 
In this example, You need to modify the title of the Ext. panel control.
 

 
[HTML]
 

 
<H1> Edit from the drop-down list  
 
[JS]
 

// Use the drop-down list to edit var editor2 = new Ext. editor ({shadow: false, completeonenter: True, cancelonesc: True, updateel: True, ignorenochange: True, listeners: {complete: function (Editor, value, oldvalue) {Ext. MSG. alert ('text changed ', "changed from" "+ oldvalue +" "to" "+ value +" ") ;}, field: {width: 110, ID: "combo1", // renderto: 'div2', triggeraction: 'all', xtype: 'combo ', Editable: false, forceselection: True, store: ['drop-down item 1', 'drop-down item 2', 'drop-down item 3']}); var Panel = new Ext. panel ({renderto: "div2", width: 200, height: 50, collapsible: True, layout: 'fit', Title: 'double-click title', listeners: {afterrender: function (panel) {panel. header. titlecmp. textel. on ('dblclick', function (event, labelworkflow DOM) {editor2.startedit (labelworkflow DOM );});}}});
 

 
The effect is as follows:
 

 
 

 
When editing:
 

 
 
By Lipan)

Source: [Lipan] (http://www.cnblogs.com/lipan)

Copyright: The copyright of this article is shared by the author and the blog. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.