<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>

    //横向，初始值50var 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);}})});

    <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>

    //设置滚轴1的值为10Ext.fly("button1").on('click', function () {slider1.setValue(10);});//获取滚轴1的值Ext.fly("button2").on('click', function () {Ext.MessageBox.alert("获取值", "滚轴1的值：" + slider1.getValue());});//设置滚轴3的值为10,15Ext.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());});

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

    //加载进度条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);}});

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

    //等候进度条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('完成。');}});});

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

    //等候进度条，当第三方事件结束时，停止。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);});

    <h1>用文本框编辑普通文本</h1><div class="content"><span id="span1">请双击我修改文字</span></div>

    //用文本框编辑普通文本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);});

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

    //用下拉列表编辑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);});}}});