Reproduced EXTJS4 notes (8) Ext.slider Roller control, Ext.progressbar progress bar control, ext.editor edit control

Li Hope (lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan/)
Copyright notice: The copyright of this article is owned by the author and the blog Park. Reprint must indicate the detailed link of this article, otherwise the author will retain to pursue its legal responsibility.

There are three controls in this article, namely the scroll control, the progress bar control, and the edit control.

One, roller control ext.slider1. Definition of Roller controls

Below we define three axis-oriented roller controls that show the characteristics of roller transverse, longitudinal, and single-valued, multi-valued selection:

[HTML]

    

[Js]
    Horizontal, initial value of    var slider1 = ext.create (' Ext.slider.Single ', {        renderto: ' Slider1 ',        width:214,        minValue : 0,        maxvalue:100,        value:50    });    Portrait, with hint    new ext.create (' Ext.slider.Single ', {        renderto: ' Slider2 ',        height:150,        minvalue:0,        maxvalue:20,        vertical:true,        plugins:new Ext.slider.Tip ()    });    Multi-value, custom hint    var slider3 = ext.create (' Ext.slider.Multi ', {        renderto: ' Slider3 ',        width:214,        minvalue:0,        maxvalue:20,        values: [5,],        plugins:new Ext.slider.Tip ({            gettext:function (thumb {                return Ext.String.format (' current:<b>{0}/20</b> ', Thumb.value);}            )    });
2. Get and set the value of the scroll control
[HTML]
    

[Js]
    Set the value of roller 1 to    ext.fly ("Button1"). On (' click ', Function () {        slider1.setvalue ()    });    Gets the value of roller 1    ext.fly ("Button2"). On (' click ', Function () {        Ext.MessageBox.alert ("Get Value", "Roller 1 Value:" + Slider1.getvalue ());    });    Set the value of roller 3 to 10,15    ext.fly ("Button3"). On (' click ', Function () {        slider3.setvalue (0);        Slider3.setvalue (1);    });    Gets the value of the Roller 3 collection    ext.fly ("Button4"). On (' click ', Function () {        Ext.MessageBox.alert ("Get Value", "Roller 3 Value collection:" + Slider3.getvalues ());    });
3. Effect display
Second, progress bar control ext.progressbar1. Loading progress bar
[HTML]
    <div class= "Content" >        <button id= "button1" > Execution </button>        <div id= "P1" style= "width: 300px; " ></div>    </div><br/>

[Js]
    Load progress bar    var progressBar1 = ext.create ("Ext.progressbar", {        ID: "ProgressBar1",        text: ' Preparing ... ',        Renderto: ' P1 '    });    Ext.fly ("Button1"). On (' click ', Function () {        //Simulate load environment        var f = function (V) {            return function () {                var i = V/12;                Progressbar1.updateprogress (I, ' progress: ' + V + '/12 ');                if (v = =) {                    Ext.Msg.alert ("hint", "load complete!") ");                    Progressbar1.reset ();   Reset the progress bar                    Progressbar1.updatetext ("done. ");                }            };        };        for (var i = 1; i < i++) {            setTimeout (f (i), I *);        }    );
2. Wait for the progress bar
[HTML]
    <div class= "Content" >        <button id= "button2" > Execution </button>        <div id= "P2" ></div>        <span id= "P2text" ></span>    </div><br/>

[Js]
    Wait for progress bar    var pbar2 = ext.create ("Ext.progressbar", {        ID: "ProgressBar2",        renderto: ' P2 ',        width: ' 150px '    });    Pbar2.on (' Update ', function (val) {        //) Each update can perform an action        ext.fly (' P2text '). dom.innerhtml + = ' > ';    });    Ext.fly ("Button2"). On (' click ', Function () {        ext.fly (' P2text '). Update (' Starting windows2000: ');        Pbar2.wait ({            interval:200,             //per-update interval            duration:5000,             //length of progress bar operation, in milliseconds            increment:5,               the amplitude size of each update of the progress bar indicates how many times it will take to complete the round (default is 10).            fn:function () {           //callback function executed after the progress bar has completed Automatic Updates. The function has no arguments.                ext.fly (' P2text '). Update (' complete. ');});    
3. Wait for the progress bar, waiting for a third party event
[HTML]
    <div class= "Content" >        <button id= "Button3" > Execution </button>        <div id= "P3" ></div>        <span id= "P3text" ></span>    </div>

[Js]
    Wait for the progress bar to stop when a 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 executing, please wait ... ');        SetTimeout (function () {            pbar3.reset ();            Ext.fly (' P3text '). Update (' execution completed. ');        }, ();    });
4. Effect display
Third, edit the control ext.editor
Edit controls can function on general HTML elements or other EXT basic controls, so that these basic elements and controls have the ability to edit certain values.
1. Edit plain text with a text box
This is done by using an edit control on the Span tab, double-click the label to edit the label's text class tolerance.
[HTML]
    

[Js]
    Edit plain text with text box    var editor1 = new Ext.editor ({        shadow:false,        completeonenter:true,      //auto-complete        when press ENTER Cancelonesc:true,          //press ESC to automatically exit edit        updateel:true,//            update ignorenochange:true When there is a change        ,/       /ignore the situation without change        listeners: {            complete:function (editor, value, OldValue) {                Ext.Msg.alert (' text changed ', "from" + OldValue + ") changed to "+ Value +" "");}        ,        field: {            allowblank:false,            xtype: ' TextField ',            width:150,            selectonfocus:true        }    });    Ext.get ("Span1"). On (' DblClick ', function (event, span1_dom) {        editor1.startedit (span1_dom);    });
The effect is as follows:
While in the editing state:
2. Edit with drop-down list
This example modifies the caption of the Ext.panel control.
[HTML]
        

[Js]
    Use the drop-down list to edit var Editor2 = new Ext.editor ({shadow:false, completeonenter:true, Cancelonesc:tr UE, Updateel:true, Ignorenochange:true, listeners: {complete:function (editor, value,            OldValue) {Ext.Msg.alert (' text changed ', "from" + OldValue + "to" "+ Value +" "); }}, field: {width:110, id: "Combo1",//renderto: ' Div2 ', trig Geraction: ' All ', xtype: ' Combo ', Editable:false, Forceselection:true, store    : [' dropdown item 1 ', ' drop-down Item 2 ', ' Dropdown 3 '}});        var panel = new Ext.panel ({renderto: "Div2", width:200, Height:50, Collapsible:true, Layout: ' Fit ', title: ' Please double-click the title ', listeners: {afterrender:function (panel) {pane L.header.titlecmp.textel.on (' DblClick ', function (event, label1_dom) {Editor2.startedit (label1_dom);            }); }        }    });
The effect is as follows:
While in the editing state: