EXtJS专题(九):ExtJS对话框的使用
2010-03-11 11:55
225 查看
接下来要学习的就是ExtJS对话框的使用了。
由于传统使用alert、confirm等方法产生的对话框非常古板,不好看。因此,ExtJS提供了一套非常漂亮的对话框,可以使用这些ExtJS对话框代替传统的alert、confirm等,实现华丽的应用程序界面。
Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。看下面的代码:
Html页面中的内容:
执行程序,点击上面的“alert框”按钮,将会在页面上显示如下图所示的对话框。
除了alert以外,Ext还包含confirm、prompt、progress、wait等对话框,另外我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数,比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ,参数title表示对话框的标题,参数msg表示对话框中的提示信息,这两个参数是必须的;可选的参数fn表示当关闭对话框后执行的回调函数,参数 scope表示回调函数的执行作用域。回调函数可以包含两个参数,即button与text,button表示点击的按钮,text表示对话框中有活动输入选项时输入的文本内容。我们可以在回调函数中通过button参数来判断用户作了什么什么选择,可以通过text来读取在对话框中输入的内容。看下面的例子:
Html内容:
点击对话框按钮将会出现下面的对话框,然后选择yes或no则会用传统的提示框输出回调函数中button及text参数的内容。
因此,在实际的应用中,上面的代码可以改成如下的内容:
这样当用户点击对话框中的yes按钮时,就会执行相应的操作,而选择no则忽略操作。
下面再看看prompt框,我们看下面的代码:
Html页面:
点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK按钮则会输入你输入的文本内容,选择cancel按钮则会提示放弃了录入,如下图所示:
在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:
点击“对话框”按钮可显示一个自定义的保存数据对话框,对话框中包含yes、no、cancel三个按钮,可以在回调函数save中根据点击的按钮执行相应的操作,如图xx所示。
ExtJS专题(九):ExtJS对话框的使用就介绍到这里了,下一篇将介绍ExtJS专题(十):布局layout的使用。
由于传统使用alert、confirm等方法产生的对话框非常古板,不好看。因此,ExtJS提供了一套非常漂亮的对话框,可以使用这些ExtJS对话框代替传统的alert、confirm等,实现华丽的应用程序界面。
Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。看下面的代码:
Html页面中的内容:
<input id="btnAlert" type="button" value="alert框" />
执行程序,点击上面的“alert框”按钮,将会在页面上显示如下图所示的对话框。
除了alert以外,Ext还包含confirm、prompt、progress、wait等对话框,另外我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数,比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ,参数title表示对话框的标题,参数msg表示对话框中的提示信息,这两个参数是必须的;可选的参数fn表示当关闭对话框后执行的回调函数,参数 scope表示回调函数的执行作用域。回调函数可以包含两个参数,即button与text,button表示点击的按钮,text表示对话框中有活动输入选项时输入的文本内容。我们可以在回调函数中通过button参数来判断用户作了什么什么选择,可以通过text来读取在对话框中输入的内容。看下面的例子:
Html内容:
<input id="对话框" type="button" value="btn" />
点击对话框按钮将会出现下面的对话框,然后选择yes或no则会用传统的提示框输出回调函数中button及text参数的内容。
因此,在实际的应用中,上面的代码可以改成如下的内容:
这样当用户点击对话框中的yes按钮时,就会执行相应的操作,而选择no则忽略操作。
下面再看看prompt框,我们看下面的代码:
Html页面:
<input id="btn" type="button" value="对话框" />
点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK按钮则会输入你输入的文本内容,选择cancel按钮则会提示放弃了录入,如下图所示:
在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:
点击“对话框”按钮可显示一个自定义的保存数据对话框,对话框中包含yes、no、cancel三个按钮,可以在回调函数save中根据点击的按钮执行相应的操作,如图xx所示。
ExtJS专题(九):ExtJS对话框的使用就介绍到这里了,下一篇将介绍ExtJS专题(十):布局layout的使用。
相关文章推荐
- ExtJS专题(六):ExtJS面板Panel中工具栏Toolbar的使用
- ExtJS专题(八):ExtJS窗口Window的使用
- ExtJS专题(十):layout布局的使用(5)
- ExtJS专题(十二)Tooltips与QuickTips的使用
- ExtJS:关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框 (修正!!)
- ExtJS梦想之旅(六)--Ext.MessageBox对话框的使用
- ExtJS专题(十):layout布局的使用(6)
- 第一课,Extjs在vs中使用及弹出对话框的介绍
- ExtJS专题(十):layout布局的使用(4)
- ExtJS专题(十):layout布局的使用(7)
- ExtJS专题(三):ExtJS组件的使用
- ExtJS专题(五):ExtJS面板Panel的使用
- ExtJS专题(十):layout布局的使用(1)
- ExtJS专题(十):layout布局的使用(3)
- ExtJS专题(十一):lTree的Treepanel使用
- Extjs在vs中使用及弹出对话框的介绍
- ExtJS专题(七):ExtJS面板Panel中视图区ViewPort的使用
- ExtJS专题(十):layout布局的使用(2)
- 使用GDI+的MFC应用程序的文件打开和保存对话框
- Android--从零单排系列(6)--相对应对话框popupwindow的优势和使用