<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="../../shared/examples.js"></script>
<style type="text/css">
.x-window-dlg .ext-mb-download {
background:transparent url(images/download.gif) no-repeat top left;
height:46px;
}
</style>
<script type="text/javascript">
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);
});
</script>
</head>
<body>
</body>
</html>