ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

 

本篇要登场的有三个控件，分别是滚轴控件、进度条控件和编辑控件。

一、滚轴控件 Ext.slider

1.滚轴控件的定义

下面我们定义三个具有代表意义滚轴控件，分别展示滚轴横向、纵向，以及单值、多值选择的特性：

[html]

?

1 2 3 4 5 6 7 8 9 10 11

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

//横向，初始值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]

?

1 2 3 4 5 6 7

< 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//设置滚轴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]

?

1 2 3 4

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

[Js]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

//加载进度条 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]

?

1 2 3 4 5

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

[Js]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//等候进度条 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]

?

1 2 3 4 5

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

[Js]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

?

1 2 3 4

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

[Js]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

?

1 2 3 4

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

[Js]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

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

效果如下：

处于编辑状态时：

作者：李盼（Lipan）
出处： [Lipan] （ http://www.cnblogs.com/lipan/）
版权声明：本文的版权归作者与博客园共有