`
finally_m
  • 浏览: 69239 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

(八)窗口及对话框

    博客分类:
  • AJAX
阅读更多

(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="修改" />

分享到:
评论

相关推荐

    MFC实例第三篇 窗口和对话框

    在本文中,我们将深入探讨MFC(Microsoft Foundation Classes)库中的窗口和对话框技术,这是Windows应用程序开发的重要组成部分。MFC是微软为C++开发者提供的一套类库,它简化了Win32 API的使用,使得创建高效、...

    网页上最酷的弹出窗口(对话框)脚本源代码及示例

    你可以把它用到ASP.NET,AJAX,Java等等所有网页上,支持的功能有:可以改变窗口大小、支持最小化、最大化窗口、模型对话框、渐入渐出的渐变效果,支持皮肤等等功能。现有的实例包括:模仿MAC OS的对话框,在对话框...

    MFC 动态创建窗口与对话框

    在Microsoft Foundation Class (MFC)库中,动态创建窗口与对话框是常见的编程任务,尤其在需要在程序运行时根据需要创建用户界面元素时。在Visual Studio 2017中,MFC提供了丰富的功能来简化这个过程。下面将详细...

    C++窗口基本对话框

    C++窗口编程在Windows平台通常使用MFC库,这是微软提供的一个C++类库,它封装了Windows API,使得开发者能够更加方便地创建和管理窗口及对话框。 2. **窗口类(Window Class)** 在创建窗口之前,需要先定义一个...

    MFC中实现对话框窗口任意分割

    本文将详细讲解如何在MFC中实现对话框窗口的任意分割,以便在同一个对话框中显示多个区域,每个区域可以独立显示或编辑信息。 首先,我们需要了解MFC中的对话框通常是基于CDialog派生的类。为了实现窗口的分割,...

    窗口净化器1.3 自动关闭窗口,对话框

    "窗口净化器1.3 自动关闭窗口,对话框"是一款专为用户设计的软件工具,旨在帮助用户自动化处理那些烦人的、频繁弹出的窗口和对话框,从而提升使用计算机时的体验。这款工具的核心功能是监测并智能地关闭指定的窗口或...

    自动调整对话框上子窗口显示位置vc.zip_VC 子对话框_vc对话框_子对话框_子窗口_对话框

    在VC++编程环境中,开发对话框(Dialog)应用程序时,我们常常需要处理多个子窗口(Subwindows)在对话框上的布局问题。标题“自动调整对话框上子窗口显示位置vc”涉及的核心技术是动态地根据对话框大小变化来自动...

    java窗口、菜单和对话框

    java窗口、菜单和对话框,资源挺好的,讲解的非常清楚,进来看看吧。

    JavaScript窗口对象对话框.pdf

    JavaScript窗口对象对话框是网页开发中常用的交互方式,主要用于向用户显示信息、确认操作或获取用户输入。在JavaScript中,窗口对象(Window)提供了三种基本的对话框:警告对话框、确认对话框和提示对话框。 1. *...

    模态对话框获取主窗口指针

    采用MFC编程时,子对话框常常要向主窗口传递数据,获取主窗口的对象指针便显得非常重要了。 void CMyView::OnModel() //点击菜单,创建对话框的几种变量设置,总共是4种方法,模态的一种,非模态的三种 { // TODO: ...

    网页上最酷的弹出窗口(对话框)脚本

    网页上最酷的弹出窗口(对话框)脚本网页上最酷的弹出窗口(对话框)脚本

    pb程序关于创建窗口和对话框

    对PB新手来说非常有用~是比较好的练习创建窗口和对话框的程序

    qml 弹出自定义窗口(模态对话框)

    在Qt Quick QML中,创建自定义窗口或者模态对话框是一种常见的需求,尤其是在开发具有用户交互性的桌面或移动应用时。QML提供了一种声明式编程的方式,使得UI设计和逻辑控制变得直观且灵活。下面我们将深入探讨如何...

    分割窗口,将对话框窗口与视图窗口相结合

    标题“分割窗口,将对话框窗口与视图窗口相结合”暗示我们将讨论如何利用`CSplitterWnd`将对话框(Dialog)和视图(View)集成在一个窗口中,创建出更复杂的用户界面。 首先,我们需要理解`CSplitterWnd`的基本概念...

    普通窗口以及对话框下实现简单拆分窗口,付代码和介绍

    本文将深入探讨如何在MFC环境中,利用`CSplitterWnd`类实现普通窗口和对话框的拆分功能。 **一、什么是拆分窗口** 拆分窗口是一种用户界面设计,允许用户动态调整两个或多个子窗口的大小和位置。在MFC中,`...

    MRgn.rar_dll 对话框_dll窗口_对话框 背景_背景 动态

    标题"MRgn.rar_dll 对话框_dll窗口_对话框 背景_背景 动态"暗示了这是一个关于自定义对话框的项目,它涉及到了动态DLL库和对话框背景的换肤功能。描述进一步说明,这是一个允许开发者通过更换背景图和重写DLL来改变...

    带有放大镜窗口的MFC对话框图片读取和浏览

    在本文中,我们将深入探讨如何在Visual Studio 2010环境下使用Microsoft Foundation Classes (MFC)库开发一个带有放大镜窗口的对话框程序,该程序能够读取和浏览BMP格式的图片,并且具备滚动浏览及图片缩放功能。...

    JavaScript窗口对象对话框案例.pdf

    在JavaScript中,有三种常见的对话框:警告对话框、确认对话框和提示对话框,它们都是JavaScript窗口对象的一部分,用于与用户进行简单的交互。 1. **警告对话框(alert)**: 警告对话框通常用于向用户显示警告或...

    易语言调整通用对话框窗口默认大小

    "易语言调整通用对话框窗口默认大小"这个主题涉及到易语言编程中如何修改系统对话框的标准尺寸,以适应特定的程序需求。易语言是一种中国本土化、简单易学的编程语言,其设计目标是降低编程的技术门槛,使得更多的人...

    计算机基础电子课件_2-2窗口和对话框

    计算机基础电子课件_2-2窗口和对话框.ppt

Global site tag (gtag.js) - Google Analytics