`

ExtJS的使用方法汇总4——拖放以及弹出窗口

 
阅读更多

本章主要简单介绍下拖放以及弹出窗口的简单应用。

一、拖放

拖放在EXT的组件体系中占有很重要的地位,很多组件内部都封装了对拖放功能的实现,本节主要讨论拖放的组件结构和范例,重点是单独使用Ext.dd包实现拖放功能,而不是与其他的组件相结合。

1.1 使用范围

(1) 可以拖放表格里的行,让他们按照指定的方式排列

(2) 可以拖放树里的节点,把节点从一个枝干拖向另外一个枝干

(3) 在表格和树之间也可以进行拖放

(4) 布局的split也是一种拖放

(5) resize也算是拖放,改变大小。

1.2 简单应用

对于B/S系统而言,拖放一直是一项很少用到的功能,我们一直认为实现拖放功能很复杂,其实在EXT中只要很少的代码即可实现,如下面代码所示:

[c-sharp] view plaincopy
  1. Ext.onReady(function(){
  2. newExt.dd.DDProxy('block');
  3. });

对应的HTML部分的代码如下:

[c-sharp] view plaincopy
  1. <divid="block"style="background:red;"mce_style="background:red;"></div>

1.3 另外一个实例

我们先查看一下详细的代码:

(1) 首先是定义拖放的部分,具体代码为:

[c-sharp] view plaincopy
  1. varproxy=newExt.dd.DragSource('proxy',{group:'dd'});

(2) target告诉我们可以把上面的proxy防盗哪些地方,如下面的代码:

[c-sharp] view plaincopy
  1. vartarget=newExt.dd.DDTarget('target','dd');

(3) 注意:两者之间有相同的'dd',这是分组标志,用来限制拖放的目的地,只有相同的组名的目的地才可以接收它。

(4) 不过,这仅仅只能实现拖放功能,没有任何效果,下面的代码可以实现,将proxy拖放到指定的区域,并且停留在该区域,如下面所示:

[c-sharp] view plaincopy
  1. proxy.afterDragDrop=function(target,e,id){
  2. vardestEl=Ext.get(id);
  3. varsrcEl=Ext.get(proxy.getEl());
  4. srcEl.insertBefore(destEl);
  5. };

二、弹出窗口

从外观上来讲,浏览器自带的alert、confirm、prompt等对话框并不好看,而且配置也不灵活。诸如按钮的添加、删除、以及修改按下按钮所触发的事件等操作都非常难以执行,而在EXT的msgbox里都能实现,而且外观相当漂亮,本节将详细介绍EXT中的弹出窗口。

2.1 Ext.MessageBox的使用方法

Ext.MessageBox为我们提供了弹出提示框的简单方法,使用它提供的alert、confirm、prompt等对话框完全可以代替浏览器原生的alert、confirm、prompt邓对话框,除此之外,Ext.MessageBox还提供了诸如进度条等更多的功能。

1、Ext.MessageBox.alert()的使用方法和效果图(图1所示)

[c-sharp] view plaincopy
  1. Ext.MessageBox.alert('标题','内容',function(btn){
  2. alert('你刚刚点击了'+btn);
  3. });

1

图1 alert效果图

2、Ext.MessageBox.confirm()的使用方法和效果图(如图2所示)

[c-sharp] view plaincopy
  1. Ext.MessageBox.confirm('选择框','你到底选择Yes还是No?',function(btn){
  2. alert('您刚刚选择了'+btn);
  3. });

2

图2 confirm效果图

3、Ext.MessageBox.prompt()的使用方法和效果图(如图3所示)

[c-sharp] view plaincopy
  1. Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){
  2. alert('你刚刚点击了'+btn+",刚刚输入了"+text);
  3. });

3

图3 prompt效果图

2.2 对话框的更多配置

1、可以输入多行的输入框

首先,我们修改原来的prompt函数,将原来只能接收单行字符串数据的文本框修改成可以支持多行文字的形式,相关代码以及效果图如下所示。

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'多行输入框',
  3. msg:'可以输入多行:',
  4. width:300,
  5. buttons:Ext.MessageBox.OKCANCEL,
  6. multiline:true,
  7. fn:function(btn,text){
  8. alert('你刚刚点击了',btn+",刚刚输入了"+text);
  9. }
  10. });

4

图4 多行输入效果图

2、自定义对话框的按钮

我们可以使用Ext.Message.show()设置对话框中按钮的样式,如下面的代码所示。

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'自定义对话框的按钮',
  3. msg:'从三个按钮中选择一个',
  4. buttons:Ext.MessageBox.YESNOCANCEL,
  5. fn:function(btn){
  6. alert('您刚刚点击了'+btn);
  7. }
  8. });

5

图5 自定义按钮

3、进度条

进度条经常用于需要用户等待某一操作完成的场景,当执行一些十分耗时的操作时,我们需要用它来提示用户耐心等待,Ext.MessageBox为我们提供了默认的进度条,只要将progress参数设置为true,对话框中就会出现进度条,如下面的代码所示:

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'请等待',
  3. msg:'读取数据中……',
  4. width:240,
  5. progress:true,
  6. closable:false
  7. });

6

图6 普通进度条

上面我们虽然已经得到了进度条,但是它的进度状态不会发生变化,我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化,通常,我们会使用closable:false来隐藏对话框右上角的关闭按钮,从而禁止用户关掉进度条。

现在,我们为上面添加更新进度条的功能,我们使用timeout定时器对进度条进行修改,进度条的状态会随着时间而变化,10秒后整个进度条对话框将隐藏。关键代码如下:

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'请等待',
  3. msg:'读取数据中……',
  4. width:240,
  5. progress:true,
  6. closable:false
  7. });
  8. varf=function(v){
  9. returnfunction(){
  10. if(v==11){
  11. Ext.MessageBox.hide();
  12. }else{
  13. Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个,一共10个。');
  14. }
  15. };
  16. };
  17. for(vari=1;i<12;i++)
  18. {
  19. setTimeout(f(i),i*1000);
  20. }

7

图7 带有更新功能的进度条

除了这种可以精确控制进度的进度条,我们还可以使用一种自动变化的进度条提示框,这时只要使用Ext.MessageBox.wait()即可,这时弹出的对话框中的进度条就会自动向前推进了,不过我们无法对进度条的值进行精确控制。

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'请等待',
  3. msg:'读取数据中……',
  4. width:240,
  5. progress:true,
  6. closable:false
  7. });
  8. Ext.MessageBox.wait();

4、动画效果

我们可以为对话框设置弹出和关闭的动画效果,使用animEl参数指定一个HTML元素,对话框就会依据制定的HTML元素播放弹出和关闭的动画。我们修改前面的代码,加入animEl参数实现动画效果,如下面的代码所示:

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'自定义对话框的按钮',
  3. msg:'从三个按钮中选择一个',
  4. buttons:Ext.MessageBox.YESNOCANCEL,
  5. fn:function(btn){
  6. alert('您刚刚点击了'+btn);
  7. },
  8. animEl:'dialog'
  9. });

animEl参数的值是一个字符串,它与HTML中的一个元素的id相对应,例如<div id="dialog"></div>。依据这个元素的id,我们创建的对话框才知道根据哪个元素播放弹出和关闭的动画。

除了Ext.MessageBox的基本应用,实际使用时还需要注意一下几点:

(1) 为了简化调用,我们可以把Ext.MessageBox直接写成Ext.Msg

(2) 我们使用Ext.MessageBox弹出的对话框都是基于同一个内部Ext.Window实例的,因此我们不能使用Ext.MessageBox弹出多个对话框,这样操作的结果是页面只会显示最后一个窗口

本章主要简单介绍下拖放以及弹出窗口的简单应用。

一、拖放

拖放在EXT的组件体系中占有很重要的地位,很多组件内部都封装了对拖放功能的实现,本节主要讨论拖放的组件结构和范例,重点是单独使用Ext.dd包实现拖放功能,而不是与其他的组件相结合。

1.1 使用范围

(1) 可以拖放表格里的行,让他们按照指定的方式排列

(2) 可以拖放树里的节点,把节点从一个枝干拖向另外一个枝干

(3) 在表格和树之间也可以进行拖放

(4) 布局的split也是一种拖放

(5) resize也算是拖放,改变大小。

1.2 简单应用

对于B/S系统而言,拖放一直是一项很少用到的功能,我们一直认为实现拖放功能很复杂,其实在EXT中只要很少的代码即可实现,如下面代码所示:

[c-sharp] view plaincopy
  1. Ext.onReady(function(){
  2. newExt.dd.DDProxy('block');
  3. });

对应的HTML部分的代码如下:

[c-sharp] view plaincopy
  1. <divid="block"style="background:red;"mce_style="background:red;"></div>

1.3 另外一个实例

我们先查看一下详细的代码:

(1) 首先是定义拖放的部分,具体代码为:

[c-sharp] view plaincopy
  1. varproxy=newExt.dd.DragSource('proxy',{group:'dd'});

(2) target告诉我们可以把上面的proxy防盗哪些地方,如下面的代码:

[c-sharp] view plaincopy
  1. vartarget=newExt.dd.DDTarget('target','dd');

(3) 注意:两者之间有相同的'dd',这是分组标志,用来限制拖放的目的地,只有相同的组名的目的地才可以接收它。

(4) 不过,这仅仅只能实现拖放功能,没有任何效果,下面的代码可以实现,将proxy拖放到指定的区域,并且停留在该区域,如下面所示:

[c-sharp] view plaincopy
  1. proxy.afterDragDrop=function(target,e,id){
  2. vardestEl=Ext.get(id);
  3. varsrcEl=Ext.get(proxy.getEl());
  4. srcEl.insertBefore(destEl);
  5. };

二、弹出窗口

从外观上来讲,浏览器自带的alert、confirm、prompt等对话框并不好看,而且配置也不灵活。诸如按钮的添加、删除、以及修改按下按钮所触发的事件等操作都非常难以执行,而在EXT的msgbox里都能实现,而且外观相当漂亮,本节将详细介绍EXT中的弹出窗口。

2.1 Ext.MessageBox的使用方法

Ext.MessageBox为我们提供了弹出提示框的简单方法,使用它提供的alert、confirm、prompt等对话框完全可以代替浏览器原生的alert、confirm、prompt邓对话框,除此之外,Ext.MessageBox还提供了诸如进度条等更多的功能。

1、Ext.MessageBox.alert()的使用方法和效果图(图1所示)

[c-sharp] view plaincopy
  1. Ext.MessageBox.alert('标题','内容',function(btn){
  2. alert('你刚刚点击了'+btn);
  3. });

1

图1 alert效果图

2、Ext.MessageBox.confirm()的使用方法和效果图(如图2所示)

[c-sharp] view plaincopy
  1. Ext.MessageBox.confirm('选择框','你到底选择Yes还是No?',function(btn){
  2. alert('您刚刚选择了'+btn);
  3. });

2

图2 confirm效果图

3、Ext.MessageBox.prompt()的使用方法和效果图(如图3所示)

[c-sharp] view plaincopy
  1. Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){
  2. alert('你刚刚点击了'+btn+",刚刚输入了"+text);
  3. });

3

图3 prompt效果图

2.2 对话框的更多配置

1、可以输入多行的输入框

首先,我们修改原来的prompt函数,将原来只能接收单行字符串数据的文本框修改成可以支持多行文字的形式,相关代码以及效果图如下所示。

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'多行输入框',
  3. msg:'可以输入多行:',
  4. width:300,
  5. buttons:Ext.MessageBox.OKCANCEL,
  6. multiline:true,
  7. fn:function(btn,text){
  8. alert('你刚刚点击了',btn+",刚刚输入了"+text);
  9. }
  10. });

4

图4 多行输入效果图

2、自定义对话框的按钮

我们可以使用Ext.Message.show()设置对话框中按钮的样式,如下面的代码所示。

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'自定义对话框的按钮',
  3. msg:'从三个按钮中选择一个',
  4. buttons:Ext.MessageBox.YESNOCANCEL,
  5. fn:function(btn){
  6. alert('您刚刚点击了'+btn);
  7. }
  8. });

5

图5 自定义按钮

3、进度条

进度条经常用于需要用户等待某一操作完成的场景,当执行一些十分耗时的操作时,我们需要用它来提示用户耐心等待,Ext.MessageBox为我们提供了默认的进度条,只要将progress参数设置为true,对话框中就会出现进度条,如下面的代码所示:

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'请等待',
  3. msg:'读取数据中……',
  4. width:240,
  5. progress:true,
  6. closable:false
  7. });

6

图6 普通进度条

上面我们虽然已经得到了进度条,但是它的进度状态不会发生变化,我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化,通常,我们会使用closable:false来隐藏对话框右上角的关闭按钮,从而禁止用户关掉进度条。

现在,我们为上面添加更新进度条的功能,我们使用timeout定时器对进度条进行修改,进度条的状态会随着时间而变化,10秒后整个进度条对话框将隐藏。关键代码如下:

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'请等待',
  3. msg:'读取数据中……',
  4. width:240,
  5. progress:true,
  6. closable:false
  7. });
  8. varf=function(v){
  9. returnfunction(){
  10. if(v==11){
  11. Ext.MessageBox.hide();
  12. }else{
  13. Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个,一共10个。');
  14. }
  15. };
  16. };
  17. for(vari=1;i<12;i++)
  18. {
  19. setTimeout(f(i),i*1000);
  20. }

7

图7 带有更新功能的进度条

除了这种可以精确控制进度的进度条,我们还可以使用一种自动变化的进度条提示框,这时只要使用Ext.MessageBox.wait()即可,这时弹出的对话框中的进度条就会自动向前推进了,不过我们无法对进度条的值进行精确控制。

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'请等待',
  3. msg:'读取数据中……',
  4. width:240,
  5. progress:true,
  6. closable:false
  7. });
  8. Ext.MessageBox.wait();

4、动画效果

我们可以为对话框设置弹出和关闭的动画效果,使用animEl参数指定一个HTML元素,对话框就会依据制定的HTML元素播放弹出和关闭的动画。我们修改前面的代码,加入animEl参数实现动画效果,如下面的代码所示:

[c-sharp] view plaincopy
  1. Ext.MessageBox.show({
  2. title:'自定义对话框的按钮',
  3. msg:'从三个按钮中选择一个',
  4. buttons:Ext.MessageBox.YESNOCANCEL,
  5. fn:function(btn){
  6. alert('您刚刚点击了'+btn);
  7. },
  8. animEl:'dialog'
  9. });

animEl参数的值是一个字符串,它与HTML中的一个元素的id相对应,例如<div id="dialog"></div>。依据这个元素的id,我们创建的对话框才知道根据哪个元素播放弹出和关闭的动画。

除了Ext.MessageBox的基本应用,实际使用时还需要注意一下几点:

(1) 为了简化调用,我们可以把Ext.MessageBox直接写成Ext.Msg

(2) 我们使用Ext.MessageBox弹出的对话框都是基于同一个内部Ext.Window实例的,因此我们不能使用Ext.MessageBox弹出多个对话框,这样操作的结果是页面只会显示最后一个窗口

分享到:
评论

相关推荐

    EXTJS4自学手册

    EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS...

    ExtJS的使用方法汇总--doc文档

    配置和表格控件使用 表单与输入控件 树形结构 拖放以及弹出窗口

    EXTJS弹出窗口

    EXTJS 点击按钮弹出窗体 可根据实际需求更改

    ExtJS4.0图文实例——数据组件介绍及简单应用

    ExtJS4.0图文实例——数据组件介绍及简单应用

    ExtJS4中文教程2 开发笔记 chm

    ExtJS 4 DirectStore post参数的变化以及应对方法 ExtJS 4 实例之数据包 ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读...

    extjs属性方法大全

    extjs属性方法集中方便你查看学习,赶快来下载吧!学习extjs

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

    基于EXTJS插件制作的弹出提示窗口.rar

    基于EXTJS插件制作的弹出提示窗口,本效果代码更新记录:  v1.0(20090424) 偷窃ext window素材以及利用ext core,DD,Resizable 简化重新实现Window  v1.1(20090424) 修正ie显示问题  v1.5 抄袭extjs window 拖放...

    extJs3升级extjs4方案

    extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码

    Extjs+Gride使用方法

    Extjs+Gride使用方法 Extjs Gride

    Extjs4 grid使用例子

    基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子

    lhgdialog DIV弹出窗口框架

    而其它弹出 窗口(比如:JQuery,ExtJs,Mootools,还有其它弹出窗口等)CUP的占有率都在50%左右,最高60%以上。 窗口样式更改简便:组件采用的是QQ2009窗口的界面,虽说不上很漂亮,但也不算难看(本个界面设计...

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    包含各种类型的extjs小图标,Extjs4小图标

    包含各种类型的extjs小图标,Extjs4小图标

    Extjs4的demo

    Extjs4的demo 很不错的例子

    深入浅出ExtJS PDF 扫描版

    第7章 弹出窗口 第8章 布局 第9章 工具栏和菜单 第10章 数据存储与传输 第11章 实用工具 第12章 一个完整的EXT应用 第13章 通过Ext Framework合理地应用EXT 附录A EXT常见问题 附录B EXT对AIR的支持 附录C EXT的版本...

    extjs4.x学习笔记

    xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...

    深入浅出ExtJS(第二版)

    书中详细讲述了EXT的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具等内容,每个知识点都配有相应的示例,可操作性极强,同时补充了两个功能强大的实例,并加入...

    深入浅出Ext JS(第2版).part1.rar

    全书由一个可以引领读者快速入门的“HelloWorld”示例开篇,紧接着对ExtJS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个...

    EXTJS动态树——基于mysql、jsp

    一个关于extjs的动态树demo 好久没裸写(不用框架)过了,都不记得关闭数据连接的语句写在哪里了。 这个demo至少要你懂得一些extjs语法,否则,你会看着很费劲。 里面提供了需要的表结构和mysql驱动 如果你不会mysql...

Global site tag (gtag.js) - Google Analytics