EXT窗口Window及对话框MessageBox_extjs

看下面的代码:

复制代码 代码如下:

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);
}
);

  页面中的html内容:
  执行上面的代码,当点击按钮“新窗口”的时候,会在页面中显示一个窗口,窗口标题为“窗口x”,窗口可以关闭,可以最大化,点击最大化按钮会最大化窗口,最大化的窗口可以还原,如图xxx所示。

窗口分组
  窗口是分组进行管理的,可以对一组窗口进行操作,默认情况下的窗口都在默认的组 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.oReay(
function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
}
);

  页面中的html代码
  执行上面的代码,先点击几次“新窗口”按钮,可以在页面中显示几个容器,然后拖动这些窗口,让他们在屏幕中不同的位置。然后点“放到后台”按钮,可以实现把最前面的窗口移动该组窗口的最后面去,点击“隐藏所有”按钮,可以隐藏当前打开的所有窗口。如下图所示:

对话框
  由于传统使用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的提示框");
}
);
}
);

  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来读取在对话框中输入的内容。看下面的例子:

复制代码 代码如下:

Ext.onReady(
function(){
Ext.get("btn").on(
"click",
function(){
Ext.MessageBox.confirm(
"请确认","是否真的要删除指定的内容",
function(button,text){
alert(button);
alert(text);
}
);
}
);
}
);

  Html内容:

  点击对话框按钮将会出现下面的对话框,然后选择yes或no则会用传统的提示框输出回调函数中button及text参数的内容。

因此,在实际的应用中,上面的代码可以改成如下的内容:

复制代码 代码如下:

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("你放弃了录入!");
}
);
}
);
}
);

  Html页面:
  点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK按钮则会输入你输入的文本内容,选择cancel按钮则会提示放弃了录入,如下图所示:
 
在实际应用中,可以直接使用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
});
}
);
}
);

  点击“对话框”按钮可显示一个自定义的保存数据对话框,对话框中包含yes、no、cancel三个按钮,可以在回调函数save中根据点击的按钮执行相应的操作,如图xx所示。

时间: 2024-11-02 16:15:13

EXT窗口Window及对话框MessageBox_extjs的相关文章

javascript-Android WebView中子窗口iframe的js方法无法获取父窗口window中的js变量?

问题描述 Android WebView中子窗口iframe的js方法无法获取父窗口window中的js变量? 如题,今天写了一个Html页面,包含Js方法若干,其中包括建立全局的js变量.即window.var 另外,Html中包含一个iframe子窗体,子窗体中的Js方法需要调用父窗体Js方法中所建立的那个全局变量 用PC端的浏览器打开主页,iframe可以获取到父窗体中的JS变量,但是用android的WebView打开这个Html页面,却始终无法获取到 尝试了很多种方式都不行,既然PC端

请教EXT窗口参数问题

问题描述 最近自己在做一个东西,前端用的是EXT,也是在自学自用EXT,遇到一个窗口间的参数传递问题,向各位请教一下:主页面是一个gridpanel(该panel中有一个参数(ID)),点击"新增"弹出一个新窗口(是用EXT.window实现的),新窗口中有一个formpanel,我现在需要的就是在formpanel提交的时候,能够将主页面的gridpanel中的参数ID传到后台,请问我该这么实现? 解决方案 你可以在创建Window组件时把主Panel的ID作为一个属性传到windo

UI器件练手:用Ext JS制作“关于”对话框(适合Ext新手)。

有时候我们接触Ext会不会因为它的羞涩的JS语法让我们感觉到,驯服它不是一件容易的事呢?或许大家初初接触的时候,没错,是有很多的例子,但叹谓之余,仍感觉是老鼠来拉耗子,无从入手呢? 也许,我们应该静下心来,不一定要拼命地钻,不经意的一个界面,就可以由Ext绘制而成,好像这里为大家介绍的一个软件界面中常见的"关于"对话框. 下图就是最终完成的截图,不会太复杂,正好说明Ext组件的基本运用.   首先,引入必须的CSS样式规则和about.js文件到页面.about.js包含了Ext.ux

弹出窗口window.open()的参数列表

window|弹出窗口 <SCRIPT LANGUAGE="javascript">  <!--  window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')  //写成一行  -->  </SCRIPT>

jquery强制弹出新窗口window.open

  目前情况下我们使用window.open自动弹出窗口都会给浏览器拦截掉了,但我们会发现有些网站还是可以弹出窗口了,这种是如何实现的呢?下面一起来看一下基于jquery的做法. 在很多网站中,会有弹出窗口,通常采用window.open的方式,但是这个方式一般被浏览器给禁止了. 说明这也是好事.现在的浏览器:360 猎豹 搜狗 等等都标明自己的安全性.智能性.屏蔽各种广告,给了用户很好的体验,但是可苦了我们这些站长们啊. 有广告还不显示出来,如何过活啊? 言归正传. 如何用jquery强制弹出

mfc 窗口通信-mfc 对话框窗口分割后通信通信

问题描述 mfc 对话框窗口分割后通信通信 将对话框分割为两个窗口,如何实现这连个窗口之间的通信新手,求指导谢谢 解决方案 对话框分割后还是一个窗口,而不是两个.所以只要定义成员变量,就可以互相传值 解决方案二: 获取窗口句柄,然后发消息用postmessage 收消息用getmessage或peekmessage 解决方案三: 都通过对话框本身的实例对象来通信,它可以访问两个窗口 解决方案四: 要看你这个分隔是怎么分隔了.1. 中间划了一条竖线,额,这个嘛,互相可以访问了2. 的的确确分了两个

MFC应用程序中处理消息的顺序,创建窗口的过程关闭窗口的顺序(非模态窗口),打开模式对话框的函数调用顺序

MFC应用程序中处理消息的顺序 1.AfxWndProc()      该函数负责接收消息,找到消息所属的CWnd对象,然后调用AfxCallWndProc 2.AfxCallWndProc() 该函数负责保存消息(保存的内容主要是消息标识符和消息参数)供应用程序以后使用,                    然后调用WindowProc()函数 3.WindowProc()      该函数负责发送消息到OnWndMsg()函数,如果未被处理,则调用DefWindowProc()函数 4.O

关于ext中window如何隐藏水平滑动条

问题描述 这是我window的配置项方法一: id : 'xxxxxx',layout : 'form',title : 'xxxxx,closable : true,modal : true,constrain : true,width : 600,height : Ext.getBody().getComputedHeight() * 3 / 4,plain : true,buttonAlign : 'center',autoScroll : true,bodyStyle:'overflow

Extjs Ext.MessageBox.confirm 确认对话框详解_extjs

Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮"是"和"否"如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中. 调用格式: confirm(String title,String msg,[function fn],[Object scope]) 参数说明: Ext.MessageBox.