logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Extjs----Ext.Message以及Window弹出窗口

 I_T_馆 2012-04-11
这里是extjs中的弹出窗口的事例
----------------------------------------------------------------------------
效果图如下
 
 
 
 
 
 
 
 
 
 




------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>
--------------------------------------------------------------------

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： I_T_馆 > 《ExtJS》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多