ExtJs4 筆記（8） Ext.slider 滾軸控件、 Ext.ProgressBar 進度條控件、 Ext.Editor 編輯控件

本篇要登場的有三個控件，分別是滾軸控件、進度條控件和編輯控件。

一、滾軸控件 Ext.slider

1.滾軸控件的定義

下面我們定義三個具有代表意義滾軸控件，分別展示滾軸橫向、縱向，以及單值、多值選擇的特性：

[html]

    <h1>滾軸控件</h1>
    <div class="content">
        <h2>橫向，初始值50</h2>
        <div id="slider1"></div>

        <h2>縱向，帶提示</h2>
        <div id="slider2"></div>

         <h2>多值，自定義提示</h2>
        <div id="slider3"></div>
    </div>

[Js]

    //橫向，初始值50
    var slider1 = Ext.create('Ext.slider.Single', {
        renderTo: 'slider1',
        width: 214,
        minValue: 0,
        maxValue: 100,
        value: 50
    });

    //縱向，帶提示
    new Ext.create('Ext.slider.Single', {
        renderTo: 'slider2',
        height: 150,
        minValue: 0,
        maxValue: 20,
        vertical: true,
        plugins: new Ext.slider.Tip()
    });

    //多值，自定義提示
    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('當前：<b>{0}/20</b>', thumb.value);
            }
        })
    });

2.獲取、設置滾軸控件的值

[html]

    <h1>操作滾軸控件</h1>
    <div class="content">
    <button id="button1">設置滾軸1的值爲10</button>
    <button id="button2">獲取滾軸1的值</button>
    <button id="button3">設置滾軸3的值爲10,15</button>
    <button id="button4">獲取滾軸3的值集合</button>
    </div>

[Js]

    //設置滾軸1的值爲10
    Ext.fly("button1").on('click', function () {
        slider1.setValue(10);
    });

    //獲取滾軸1的值
    Ext.fly("button2").on('click', function () {
        Ext.MessageBox.alert("獲取值", "滾軸1的值：" + slider1.getValue());
    });

    //設置滾軸3的值爲10,15
    Ext.fly("button3").on('click', function () {
        slider3.setValue(0, 10);
        slider3.setValue(1, 15);
    });

    //獲取滾軸3的值集合
    Ext.fly("button4").on('click', function () {
        Ext.MessageBox.alert("獲取值", "滾軸3的值集合：" + slider3.getValues());
    });

3.效果展示

二、進度條控件 Ext.ProgressBar

1.加載進度條

[html]

    <div class="content">
        <button id="button1">執行</button>
        <div id="p1" style="width: 300px;"></div>
    </div><br />

[Js]

    //加載進度條
    var progressBar1 = Ext.create("Ext.ProgressBar", {
        id: "progressBar1",
        text: '準備中...',
        renderTo: 'p1'
    });
    Ext.fly("button1").on('click', function () {
        //模擬加載環境
        var f = function (v) {
            return function () {
                var i = v / 12;
                progressBar1.updateProgress(i, '進度：' + v + '/12');
                if (v == 12) {
                    Ext.Msg.alert("提示", "加載完畢！");
                    progressBar1.reset();   //復位進度條
                    progressBar1.updateText("完成。");
                }
            };
        };
        for (var i = 1; i < 13; i++) {
            setTimeout(f(i), i * 200);
        }
    });

2.等候進度條

[html]

    <div class="content">
        <button id="button2">執行</button>
        <div id="p2"></div>
        <span id="p2text"></span>
    </div><br />

[Js]

    //等候進度條
    var pbar2 = Ext.create("Ext.ProgressBar", {
        id: "progressBar2",
        renderTo: 'p2',
        width: '150px'
    });
    pbar2.on('update', function (val) {
        //每次更新可以執行的動作
        Ext.fly('p2text').dom.innerHTML += '>';
    });
    Ext.fly("button2").on('click', function () {
        Ext.fly('p2text').update('正在啓動windows2000：');
        pbar2.wait({
            interval: 200,             //每次更新的間隔週期
            duration: 5000,             //進度條運作時間的長度，單位是毫秒
            increment: 5,               //進度條每次更新的幅度大小,表示走完一輪要幾次（默認爲10）。
            fn: function () {           //當進度條完成自動更新後執行的回調函數。該函數沒有參數。
                Ext.fly('p2text').update('完成。');
            }
        });
    });

3.等候進度條，等待第三方事件

[html]

    <div class="content">
        <button id="button3">執行</button>
        <div id="p3"></div>
        <span id="p3text"></span>
    </div>

[Js]

    //等候進度條，當第三方事件結束時，停止。
    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('第三方事件正在執行，請稍候....');

        setTimeout(function () {
            pbar3.reset();
            Ext.fly('p3text').update('執行完畢.');
        }, 5000);
    });

4.效果展示

三、編輯控件 Ext.Editor

編輯控件可以作用在一般html元素或者其他ext基本控件上，從而然這些基本元素和控件具備了編輯某些值的能力。

1.用文本框編輯普通文本

下面通過一個編輯控件作用在span標籤上，雙擊該標籤即可編輯該標籤的文本類容。

[html]

    <h1>用文本框編輯普通文本</h1>
    <div class="content">
    <span id="span1">請雙擊我修改文字</span>
    </div>

[Js]

    //用文本框編輯普通文本
    var editor1 = new Ext.Editor({
        shadow: false,
        completeOnEnter: true,      //按回車時自動完成
        cancelOnEsc: true,          //按ESC自動退出編輯
        updateEl: true,            //有變化時更新
        ignoreNoChange: true,       //不理會沒有變化的情況
        listeners: {
            complete: function (editor, value, oldValue) {
                Ext.Msg.alert('文本被改變', "從“" + oldValue + "” 變爲“" + value + "”");
            }
        },
        field: {
            allowBlank: false,
            xtype: 'textfield',
            width: 150,
            selectOnFocus: true
        }
    });

    Ext.get("span1").on('dblclick', function (event, span1_dom) {
        editor1.startEdit(span1_dom);
    });

效果如下：

處於編輯狀態時：

2.用下拉列表編輯

這個例子要修改Ext.Panel控件的標題。

[html]

        <h1>用下拉列表編輯</h1>
    <div class="content" id="div2">
    
    </div>

[Js]

    //用下拉列表編輯
    var editor2 = new Ext.Editor({
        shadow: false,
        completeOnEnter: true,
        cancelOnEsc: true,
        updateEl: true,
        ignoreNoChange: true,
        listeners: {
            complete: function (editor, value, oldValue) {
                Ext.Msg.alert('文本被改變', "從“" + oldValue + "” 變爲“" + value + "”");
            }
        },
        field: {
            width: 110,
            id: "combo1",
            //renderTo: 'div2',
            triggerAction: 'all',
            xtype: 'combo',
            editable: false,
            forceSelection: true,
            store: ['下拉項1', '下拉項2', '下拉項3']
        }
    });

    var panel = new Ext.Panel({
        renderTo: "div2",
        width: 200,
        height: 50,
        collapsible: true,
        layout: 'fit',
        title: '請雙擊標題',
        listeners: {
            afterrender: function (panel) {
                panel.header.titleCmp.textEl.on('dblclick', function (event, label1_dom) {
                    editor2.startEdit(label1_dom);
                });
            }
        }
    });