扩展窗口窗口和对话框消息框

看下面的代码：复制代码如下： var I=0；函数win(){ var win=new ext . window({ title : ' window ' I，width :400，height :300，maximizable : true })；win . show()；} Ext . OnReady(function(){ Ext . get(' BTN ')。on('click '，newWin)；} );页面中的Html内容：执行上面的代码。点击“新建窗口”按钮，页面上会显示一个窗口，标题为“窗口X”，可以关闭并最大化。单击最大化按钮将最大化窗口并恢复最大化窗口，如图xxx所示。

分组窗口是分组管理的，可以操作一组窗口。默认情况下，所有窗口都在默认组Ext中。窗口管理器窗口分组由类Ext定义。WindowGroup，其中包括bringToFront、getActive、hideAll、sendToBack等用于操作分组窗口的方法。看下面的代码：复制代码如下： var i=0，mygroup函数new win(){ var win=new ext . window({ title : ' window ' I，width :400，height :300，maximizable 3360 true，manager : my group })；win . show()；} function Toback(){ my group . sendToback(my group . GetActivity())；}函数hideAll(){ my group . hideAll()；} Ext . OreAy(function(){ my group=new Ext。window GrouP()；Ext.get('btn ')。on('click '，newWin)；Ext.get('btnToBack ')。on('click '，Toback)；Ext.get('btnHide ')。on('click '，HideAll)；} );页面中的html代码执行上述代码。多次单击“新建窗口”按钮，在页面上显示几个容器，然后拖动这些窗口，使它们在屏幕上处于不同的位置。然后点击“放入背景”按钮，将前面的窗口移到组的后面，点击“全部隐藏”按钮，隐藏所有当前打开的窗口。如下图所示：

对话框传统的方法如提醒、确认等产生的对话框非常老套，不美观。所以ExtJS提供了一套漂亮的对话框，可以用来代替传统的提醒、确认等。并实现华丽的应用界面。扩展对话框都封装在扩展中。MessageBox类，也有缩写形式，即Ext.Msg，可以通过Ext直接调用对应的对话框方法。消息框或扩展消息显示扩展对话框。看看下面的代码：复制代码如下： ext . onready(function(){ ext . get(' btnalert ')。on ('click '，function(){ ext . messagebox . alert('请注意'，'这是ExtJS的提示框')；} );} );Html页面中的内容：执行程序，点击上面的“提醒框”按钮，页面上会显示如下图所示的对话框。

除了警报，Ext还包含确认、提示、进度、等待等对话框。此外，我们可以根据需要显示自定义对话框。一个常见的对话框一般包括四个参数，比如confirm的方法签名是confirm(字符串标题、字符串msg、[函数fn]、[对象范围])，参数标题表示对话框的标题，参数msg表示对话框中的提示信息，这些都是必须的；可选参数fn表示关闭对话框后要执行的回调函数，参数scope表示回调函数的执行范围。回调函数可以包含两个参数，即按钮和文本，按钮代表被点击的按钮，文本代表对话框中有活动输入选项时输入的文本内容。我们可以使用回调函数中的button参数来判断用户做了哪些选择，也可以使用文本来读取对话框中输入的内容。参见下面的例子：复制代码如下： ext . onready(function(){ ext . get(' BTN ')。on ('click '，function(){ ext . messagebox . confirm('请确认'，'您真的要删除指定的内容吗')，function (button，text) {alert。警报(文本)；} );} );} );Html内容：点击对话框按钮，显示如下对话框，然后选择是或否，以传统的提示框输出回调函数中按钮和文本参数的内容。

因此，在实际应用中，上述代码可以更改为以下内容：复制代码如下： ext . onready(function(){ ext . get(' btnalert ')。on ('click '，function(){ ext . messagebox . confirm('请确认'，您真的要删除指定的内容吗？函数(按钮，文本){if(按钮==' yes '){//执行删除操作告警('成功删除')；} } );} );} );这样，当用户单击对话框中的是按钮时，将执行相应的操作，而选择否将忽略该操作。我们再来看看提示框。我们来看看下面的代码：复制代码的代码如下： ext . onready(function(){ ext . get(' BTN ')。on ('click '，function(){ ext . messagebox . prompt(' enter prompt box '，请输入您的新年愿望： '，function (button，text) {if (button==' ok') {alert('您的新年愿望是： ' text)；} else alert('您放弃了键入！');} );} );} );Html页面：点击上面的“对话框”按钮，显示如下图所示的内容。如果单击确定按钮，您将输入您输入的文本内容。如果选择取消按钮，会提示放弃录入，如下图所示：。

在实际应用中，可以直接使用MessageBox的show方法显示自定义对话框，如下代码：复制代码如下：函数save(button){ if(button==' yes '){//执行数据保存操作} else if(button=='no'){ //不保存数据} else{ //取消当前操作}}。延伸文件系统onready (function () {ext。get ('BTN ')。on ('click '，function () {ext。味精。show ({title : '保存数据'，msg: '您已经完成了一些数据操作，是否要保存对当前内容的修改？'，按钮： Ext。Msg.YESNOCANCEL，fn: save，icon: Ext。MessageBox . QUESTION })；} );} );点击“对话框”按钮，显示用户自定义的数据保存对话框，包含“是”、“否”和“取消”三个按钮。可以根据回调函数save中点击的按钮进行相应的操作，如图xx所示。