ExtJS之对话框及窗口篇

系统 1762 0

窗口无论是在基本的js中还是在Ext这种js框架中都是比较常见的,而且现在多数js框架也在视图打造唯美的窗口,当然,Ext就是其中一个。Ext的窗口时很漂亮的,而且类型众多,今天我们就从基础做起逐渐来了解Ext的窗口。

注意:对于Ext的目录及其文件存放结构在此就不再过多赘余。

基本的Ext对话框

首先用Ext的话肯定要引入其类库及其样式文件,注意对于ext-base.js和ext-all.js的引入顺序一定不能够颠倒。

接下来当然就是写我们自己的js代码,注意Ext和jQuery一样都会在load事件之前加载代码,在Ext中对应的就是onReady事件。

首页我们在页面有一个按钮,其id为btnAlert,然后在onReady中我们给按钮添加click事件,在按钮的单击事件中我们通过Ext.MessageBox.alert()来弹出对话框。

效果如图:

ExtJS之对话框及窗口篇

确认对话框

我们都知道在js中有时会用到confirm,当然在ext中也是有的。

用法和js没有区别,效果如图:

ExtJS之对话框及窗口篇

输入对话框

其实看了上面两个对话框,你应该就知道下面肯定要说到Prompt

运行效果:

ExtJS之对话框及窗口篇

扩展:多行输入对话框

在js中我们应该是没有多行的prompt,但是在Ext中却用自定义对话框(下面会说到)给我们模拟出来了。

效果:

ExtJS之对话框及窗口篇

自定义对话框

其实你会发现上面几种对话框有时候并不能满足我们的要求,我们经常用word都知道如果我们新建了或修改了信息之后而没有保存,现在要关闭word的时候就会给出提示,在这个提示框中我们不是只有两种选择而是有三种,您可以选择保存、不保存或者取消关闭操作。下面我们也来定义一个这样的对话框。

我们第一个行数用于为自定义对话框服务,在对话框中我们首先声明标题信息,然后定义提示信息,接着定义按钮类型、处理函数、图标等信息,当然着所有的一切都是json格式。

效果如图

ExtJS之对话框及窗口篇

如果点击yes的话就会按照上面定义的函数提示保存成功。

当然上面的buttons和icon还有其他形式,具体见ExtJs API中MessageBox

进度条对话框

Ext中给我们准备了进度条,下面我们看一下:

对于上面的代码,注意其进度处理函数是在click事件内部,通过调用Ext.MessageBox.updateProgress()函数,Ext自己就会知道是更新当前的进度对话框的进度。

效果如图:

ExtJS之对话框及窗口篇

等待处理进度对话框

进度条是在已知处理时间的情况下使用,如果说你要处理一个事情,但是不知道处理时间这是我们就会用到等待进度,也就是这个进度重复行进就像启动windows xp时那个进度条一样。

效果如图:

ExtJS之对话框及窗口篇

Ext窗口

到这里位置,我们才说道Ext中的窗口,上面我们主要谈了一下Ext中的各种对话框,窗口还没有说(关于窗口和对话框的区别在此就不再过多解释了)。经常地在很多论坛中我们能够看到注册及登录页面不再像以前一样单独做一个页面而是以一个窗口的形式展现在我们面前供我们数据信息,之后可以提交。

对于上面的代码基本上都有注释,我也不再做解释,对于TabPanel如果不理解没有关系,后面会专门提到。

运行效果:

ExtJS之对话框及窗口篇

注意上面的Ext.MessageBox也可以用Ext.Msg这个别名代替,其实上面我们已经用了。

ExtJS之对话框及窗口篇


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论