extjs 关闭弹出窗口_Extjs----Ext.Message以及Window弹出窗口

无标题文档

.x-window-dlg .ext-mb-download {

background:transparent url(images/download.gif) no-repeat top left;

height:46px;

}

Ext.onReady(function(){

//1.显示Ext.Msg.alert()

//2.显示Ext.msg.confirm()

//3.Ext.Msg.prompt()

//4.prompt改进

//5.进度条

//6.Wait Dialog进度条

//7.一个简单的弹出窗口

//8.复杂的弹出窗口--在窗口中加载tabs

//9.复杂的窗口2---window with layout=

var bd=new Ext.getBody();

//=================   showResult()   ===============

var showResult=function(btn){

Ext.example.msg('click button','you clicked the {0} button',btn);

}

//=================   showResultText()  ========================

var showResultText=function(btn,text){

Ext.example.msg('chlick button','you click the {0} button,and entered the text {1}',btn,text);

}

//===========    1  显示Ext.Msg.alert()  =============

bd.createChild({tag:'h2',html:'显示Ext.Msg.alert()'});

var button1=new Ext.Button({

width:100,

height:40,

text:'alert',

handler:function(){

Ext.Msg.alert('提示','输入的内容',showResult);

}

});

button1.render(document.body);

//=============   2  显示Ext.msg.confirm  ==============

bd.createChild({tag:'h2',html:'显示Ext.msg.confirm'});

var button2=new Ext.Button({

width:100,

height:40,

text:'confirm',

handler:function(){

Ext.Msg.confirm('提示','内容',showResult);

}

});

button2.render(document.body);

//===============   3 Ext.Msg.prompt()    ==================

bd.createChild({tag:'h2',html:'Ext.Msg.prompt()'});

var button3=new Ext.Button({

width:100,

height:40,

text:'prompt',

handler:function(){

Ext.Msg.prompt('提示','内容',showResultText);

}

});

button3.render(document.body);

//===============    4 prompt改进 ==========================

bd.createChild({tag:'h2',html:'prompt改进'});

var button4=new Ext.Button({

width:100,

height:40,

text:'prompt改进',

handler:function(){

Ext.MessageBox.show({

width:200,

height:80,

title:'可以输入多行的输入框',

msg:'你可以输入多行',

multiline:true,

buttons:Ext.Msg.YESNOCANCEL,

animEl:'dialog',

fn:showResultText

});

}

});

button4.render(document.body);

//===========   5 进度条   ===================

bd.createChild({tag:'h2',html:'进度条'});

var button5=new Ext.Button({

width:100,

height:40,

text:'进度条',

handler:function(){

Ext.MessageBox.show({

title:'进度条progress',

msg:'数据读取中',

progress:true,

width:350,

height:100

});

var f=function(v){

return function(){

if(v==11){

Ext.MessageBox.hide();

}

else{

Ext.MessageBox.updateProgress(v/10, '当前读取第'+v+'个文件,一共10个');

}

}

}

for(var i=1;i<12;i++){

setTimeout(f(i), i*500);//setTimeout(code,millisec),两个参数都是必须的,code:要执行的js代码;millisec:等待多久执行js代码(毫秒数)

}

}

});

button5.render(document.body);

//==================      6 Wait Dialog进度条     =========================

bd.createChild({tag:'h2',html:'Wait Dialog进度条 '});

var button6=new Ext.Button({

width:100,

height:60,

text:'wait dialog',

handler:function(){

Ext.MessageBox.show({

msg: 'Saving your data, please wait...',

//progressText: 'Saving...',

width:300,

wait:true,

waitConfig: {interval:200},//设定显示一次进度条需要2秒

icon:'ext-mb-download', //这里调用的是上面定义好的css

animEl: 'mb7'

});

setTimeout(function(){

Ext.MessageBox.hide();

Ext.example.msg('Done', 'Your fake data was saved!');

}, 8000);

}

//setTimeout(code,millisec),两个参数都是必须的,code:要执行的js代码;millisec:等待多久执行js代码(毫秒数)

});

button6.render(document.body);

/*

*====================7.一个简单的弹出窗口'==================

*/

bd.createChild({tag:'h2',html:'一个简单的弹出窗口'});

var button7=new Ext.Button({

width:60,

height:30,

text:'弹出窗口',

handler:function(){

var win=new Ext.Window({

width:600,

height:300,

closable:true,

layout:'fit',//布局方式

maximizable:true,//显示最大化按钮,点击最大化按钮,窗口自动扩展充满整个浏览器,并且窗口右上角的最大化按钮变为回复原状的按钮

minimizable:true,//显示最小化按钮,并未对这个按钮做任何处理,可以添加监听事件minimizable或重写minimizable()函数

closeAction:'hide',

constrainHeader:true,//设置窗口的顶部不会超出浏览器边界

//constrain:true,//设置整个窗口都不回超出浏览器边界

defaultButton:0,//默认选中的按钮

resizable:true,//控制窗口是否可以通过拖拽改变大小

resizeHandles:'se',//控制拖拽方式,必须是在设置了resizable的情况下,

modal:true,//弹出窗口后立刻屏蔽掉其他的组件,只有关闭窗口后才能操作其他组件,

plain:true,//对窗口内部内容惊醒美化,可以看到整齐的边框

animateTarget:'target',//可以使窗口展示弹并缩回效果的动画

items:[{

layout:'form',

defaultType:'textfield',

defaults:{width:200},

style:{

marginTop:10,

marginLeft:10

},

labelWidth:60,

labelAlign:'right',

items:[

{

style:{

marginTop:10,

marginLeft:10

},

labelStyle:'margin-Top:10px',

fieldLabel:'文本1'

},{

style:{

marginTop:10,

marginLeft:10

},

labelStyle:'margin-Top:10px',

fieldLabel:'文本2'

},{

style:{

marginTop:10,

marginLeft:10

},

labelStyle:'margin-Top:10px',

fieldLabel:'文本3'

},{

style:{

marginTop:10,

marginLeft:10

},

labelStyle:'margin-Top:10px',

fieldLabel:'文本4'

}

]

}],

buttons:[

{

text:'Save',

handler:function(){

win.hide();

}

},{

text:'Cancel',

handler:function(){

win.close();

}

}

]

});

win.show();

}

});

button7.render(document.body);

//==================复杂的弹出窗口--在窗口中加载tabs=========================

bd.createChild({tag:'h2',html:'在窗口中加载tabs'});

var button8=new Ext.Button({

width:100,

height:40,

text:'show',

handler:function(){

var win=new Ext.Window({

width:600,

height:300,

closable:true,

layout:'fit',//布局方式

items:[

new Ext.TabPanel({

activeTab: 0,

width:600,

height:250,

plain:true,

defaults:{autoScroll: true},

items:[{

title: 'Normal Tab',

html: "My content was added during construction."

},{

title: 'Normal Tab',

html: "My content was added during construction."

}

]

})

],

buttons:[{

text:'submit',

}]

});

win.show();

}

});

button8.render(document.body);

//===================复杂的窗口2---window with layout==============================

bd.createChild({tag:'h2',html:'window with layout'});

var button9=new Ext.Button({

width:100,

height:40,

text:'window with layout',

handler:function(){

var win=new Ext.Window({

width:600,

height:400,

layout:'border',

title:'window with layout',

items:[{

region:'west',

collapsible:true,

layout:'fit',

width:150

},{

region:'center',

layout:'fit',

items:[

{

xtype:'tabpanel',

activeTab:0,

items:[

{html:'aaa',title:'aaa'},

{html:'bbb',title:'bbb'},

{html:'ccc',title:'ccc'},

{html:'ddd',title:'ddd'}

]

}

]

}]

});

win.show();

}

});

button9.render(document.body);

});