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);
            });
        }
    }
});