(1)窗口基本应用
ExtJS 中窗口是由Ext.Window 类定义,该类继承自Panel,因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码:
var i=0;
function newWin(){
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
<input type="button" id="btn" value="新窗口">
(2) 窗口分组
窗口是分组进行管理的,可以对一组窗口进行操作,默认情况下的窗口都在默认的组Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义,该类包括bringToFront、getActive、hideAll、sendToBack 等方法用来对分组中的窗口进行操作。
var i=0,mygroup;
function newWin(){
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack(){
mygroup.sendToBack(mygroup.getActive());
}
function hideAll(){
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐藏所有" />
执行上面的代码,先点击几次“新窗口”按钮,可以在页面中显示几个容器,然后拖动这些窗口,让他们在屏幕中不同的位置。然后点“放到后台”按钮,可以实现把最前面的窗口移动该组窗口的最后面去,点击“隐藏所有”按钮,可以隐藏当前打开的所有窗口。
(3) 对话框
由于传统使用alert、confirm 等方法产生的对话框非常古板,不好看。因此,ExtJS 提供了一套非常漂亮的对话框,可以使用这些对话框代替传统的alert、confirm 等,实现华丽的应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
});
});
<input id="btnAlert" type="button" name="add" value="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 来读取在对话框中输入的内容。看下面的例子:
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","真的要删除指定的内容吗",function(button,text){
alert(button);
alert(text);
});
});
});
<input id="btn" type="button" name="add" value="delete" />
因此,在实际的应用中,上面的代码可以改成如下的内容:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm("请确认","真的要删除指定的内容吗",function(button,text){
if(button=="yes"){
//执行删除操作
alert("成功删除");
}
});
});
});
这样当用户点击对话框中的yes 按钮时,就会执行相应的操作,而选择no 则忽略操作。
下面再看看prompt 框,我们看下面的代码:
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你的愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else alert("你放弃了录入!");
});
});
});
<input id="btn" type="button" name="add" value="愿望" />
在实际应用中,可以直接使用MessageBox 的show 方法来显示自定义的对话框,如下面的代码:
function save(button){
if(button=="yes"){
//执行数据保存操作
} else if(button=="no"){
//不保存数据
} else{
//取消当前操作
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作,是否要保存当前内容的修改?',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
<input id="btn" type="button" name="add" value="修改" />
分享到:
相关推荐
你可以把它用到ASP.NET,AJAX,Java等等所有网页上,支持的功能有:可以改变窗口大小、支持最小化、最大化窗口、模型对话框、渐入渐出的渐变效果,支持皮肤等等功能。现有的实例包括:模仿MAC OS的对话框,在对话框...
基于VS2017,使用MFC,使用CreateWindow,CreateWindowEx动态创建窗口与对话框
多色窗口的实现,云形窗口,可扩展对话框及消息框等.
java窗口、菜单和对话框,资源挺好的,讲解的非常清楚,进来看看吧。
JavaScript窗口对象对话框.pdf 学习资料 复习资料 教学资源
采用MFC编程时,子对话框常常要向主窗口传递数据,获取主窗口的对象指针便显得非常重要了。 void CMyView::OnModel() //点击菜单,创建对话框的几种变量设置,总共是4种方法,模态的一种,非模态的三种 { // TODO: ...
网页上最酷的弹出窗口(对话框)脚本网页上最酷的弹出窗口(对话框)脚本
对PB新手来说非常有用~是比较好的练习创建窗口和对话框的程序
VB对话框窗口移动VB对话框窗口移动VB对话框窗口移动VB对话框窗口移动VB对话框窗口移动
JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口(对话框)控件 js javascript 对话框
JavaScript窗口对象对话框案例.pdf 学习资料 复习资料 教学资源
计算机基础电子课件_2-2窗口和对话框.ppt
自动调整对话框上子窗口显示位置vc
使用CSplitterWnd类对窗口进行分割,将对话框窗口与视图窗口相关联,达到特殊的效果
简单介绍了使用MFC如何对普通窗口和对话框进行拆分。有介绍,有代码。希望对您有帮助。如果不明,请留言
想关闭总是烦人的窗口吗,想关总是弹出的对话框吗?自动窗口净化器.
Ply是一款非常实用的跨浏览器模态窗口|对话框|提示框插件。可以用它来制作各种提示框,警告框,对话框,模态窗口等。它使用ES6语法编写,可以兼容IE8以上的浏览器。
窗口悬浮置顶对话框 本代码经供参考学习之用
1)编程实现如下应用程序,含有菜单,单击“新建”时弹出新建对话框(非模态对话框),单击对话框颜色按钮后应用程序窗口字体和背景色发生相应的变化。单击“关于”菜单项时弹出关于对话框(模态对话框)。 (Winodws...
VS2010环境下带局部放大小窗口的MFC对话框图片读取和浏览程序,该程序中使用picture控件读取bmp格式的图片,若图片尺寸较大可用滚动条进行浏览,同时利用滑块控件进行图片的放大和缩小。