EXT弹出窗口

EXT弹出窗口

(2013-02-06 13:55:21)


转载▼

标签： it

Ext.MessageBox.alert()

Ext.MessageBox.alert()提供一个OK按钮。对应JavaScript中的alert()。

定义：alert( Stringtitle,Stringmsg,[Function fn], [Object scope] ) :Ext.MessageBox

该函数有4个参数：

Title:窗口标题

Msg:弹出窗口内容

Fn:回调函数，在单击按钮或单击右上角的关闭图标X后执行。并且携带一个参数，即按钮的Id。

Scope：作用范围。

示例：

// alert

Ext.get("alert").on("click",function() {

Ext.MessageBox.alert("标题","这是提示的内容",function(r) {

alert(r);

});

});

<</span>input type="button" value="alert"id="alert">

在按钮alert上绑定click事件，单击时弹出alert窗口，单击OK按钮后，调用回调函数弹出按钮id。

单击alert按钮，



单击OK按钮，



单击右上角的X，则返回cancel。

24.2Ext.MessageBox.confirm()

选择对话框，提供一个Yes，一个No供用户选择是/否。对应JavaScript中的confirm()。

定义：

confirm( Stringtitle,Stringmsg,[Function fn], [Object scope] ) :Ext.MessageBox

该函数有4个参数：

Title:窗口标题

Msg:弹出窗口内容

Fn:回调函数，在单击按钮或单击右上角的关闭图标X后执行。并且携带一个参数，即按钮的Id。

Scope：作用范围。

示例：

// confirm

Ext.get("confirm").on("click",function() {

Ext.MessageBox.confirm("标题","确认执行此项操作吗？",function(r) {

alert(r);

});

});

<</span>input type="button" value="confirm"id="confirm">

单击confirm按钮：



单击Yes返回yes；单击No返回No；单击X返回No。

24.3Ext.MessageBox.prompt()

用户可以输入内容，对应JavaScript中的prompt();

定义：

prompt( Stringtitle,Stringmsg,[Function fn], [Object scope], [Boolean/Number multiline], [String value] ) :Ext.MessageBox

参数：

Title：标题

Msg：内容

Fn：回调函数。

Scope：作用范围

Multiline：是否多行，默认单行。

Value：输入框的默认值。

24.3.1单行输入框

示例：

// prompt

Ext.get("prompt").on("click",function() {

Ext.MessageBox.prompt("提示","请输入你的名字",function(btn,value) {

alert("你选择了" + btn + ",你输入的内容是：" + value);

},this,false,"刘德华");

});

<</span>input type="button" value="prompt"id="prompt">

单击prompt按钮：



单击OK返回OK，单击Cancel返回cancel，单击X返回cancel。

24.3.2多行输入框

24.3.2.1使用Ext.MessageBox.prompt()函数实现

多行输入对话框，将multiline设置为TRUE即可。

// prompt

Ext.get("prompt").on("click",function() {

Ext.MessageBox.prompt("提示","请输入你的名字",function(btn,value) {

alert("你选择了" + btn + ",你输入的内容是：" + value);

},this,true,"刘德华");

});

<</span>input type="button" value="prompt"id="prompt">

24.4.2.2使用Ext.MessageBox.show()实现

使用ext.MessageBox.show()函数，我们可以自行定义弹出窗口。

Ext.MessageBox.show({

title:"提示",

msg:"请输入你的名字",

width:300,

value:"刘德华",

buttons:Ext.MessageBox.OKCANCEL,

multiline:true,

fn:function(btn,val) {

alert("你选择了" + btn + ",你输入的内容是：" + val);

}

});

参数：

Title：标题

Msg：弹出窗口提示内容

Width:弹出窗口宽度

Value:弹出窗口输入框默认值

Buttons:弹出窗口按钮

Multiline:是否多行输入

Fn:回调函数。

24.4自定义对话框

在24.3.2.2中我们使用Ext.MessageBox.show()函数实现了能多行输入的提示窗口。

Show()函数中,buttons我们可以选择的按钮有：

CANCEL:cancel

OK：ok

OKCANCEL:ok and cancelbuttons

YESNO:yes and no buttons

YESNOCANCEL:yes、no、cancel buttons

弹出窗口的图标(icon)：

ERROR:错误

INFO：消息

QUESTION：疑问

WARNING：警告

我们可以利用这些自定义按钮和图标。

例：

Ext.MessageBox.show({

title:"提示",

msg:"请输入你的名字",

width:300,

value:"刘德华",

buttons:Ext.MessageBox.OKCANCEL,

icon:Ext.MessageBox.ERROR,

multiline:true,

fn:function(btn,val) {

alert("你选择了" + btn + ",你输入的内容是：" + val);

}

});

效果：



24.5进度条

Ext.MessageBox提供了默认的进度条，只需要将progress设置为TRUE即可。

示例：

Ext.MessageBox.show({

width:300, // 弹出窗口宽度

title:"提示", // 弹出窗口标题

msg:"正在读取数据...", // 弹出窗口内容

progress:true, // 是否是进度条

closable:false // 是否可以关闭

});

效果：



但是，这样进度条是不会动的。

我们需要调用Ext.MessageBox.updateProgress()来更新进度条。

函数定义：

updateProgress( Numbervalue,StringprogressText,Stringmsg ): Ext.MessageBox

24.5使用进度条保存数据

示例：

var box =Ext.MessageBox.show({

width:300,

title:"提示",

msg:"正在保存,请稍后...",

progress:true,

closable:false,

wait:true,

waitConfig:{

interval:500

}

});

Ext.Ajax.request({

url:"./jsp/progress.jsp",

params:{

date:new Date().toLocaleString()

},

method:"POST",

success:function(r) {

Ext.MessageBox.hide();

Ext.Msg.show({

title:"提示",

msg:r.responseText

});

},

failure:function(r){

Ext.MessageBox.hide();

Ext.Msg.show({

title:"提示",

msg:"操作失败"

});

}

});

});

Progress.jsp:

String date = request.getParameter("date");

System.out.println(date);

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

Thread.sleep(5000L);

response.getWriter().write("数据保存成功！提交时间：" + date);

在jsp中，暂停5S模拟操作数据库的过程，然后返回成功信息。

效果：

单击保存后：



后台返回数据后：

24.6Ext.Window

示例：

// Create tabs and add it into window

var tabs= new Ext.TabPanel({

activeTab:0,

defaults:{autoScroll:true},

region:"center",

items:[

{title:"标签1",html:"内容1"},

{title:"标签2",html:"内容2"},

{title:"标签3",html:"内容3",closable:true}

]

});

var p = new Ext.Panel({

title:"导航",

width:150,

region:"west",

split:true,

collapsible:true

});

// Create a window

varwindow = new Ext.Window({

title:"登陆", // 窗口标题

width:700, // 窗口宽度

height:350, // 窗口高度

layout:"border",// 布局

minimizable:true, // 最大化

maximizable:true, // 最小化

frame:true,

constrain:true, // 防止窗口超出浏览器窗口,保证不会越过浏览器边界

buttonAlign:"center", // 按钮显示的位置

modal:true, // 模式窗口，弹出窗口后屏蔽掉其他组建

resizable:false, // 是否可以调整窗口大小，默认TRUE。

plain:true,// 将窗口变为半透明状态。

items:[p,tabs],

buttons:[{

text:"登陆",

handler:function() {

Ext.Msg.alert("提示","登陆成功!");

}

}],

closeAction:'hide'//hide:单击关闭图标后隐藏，可以调用show()显示。如果是close，则会将window销毁。

});

Ext.get("window").on("click",function() {

window.show();

});

效果：