第4章 EXT 窗口和对话框.docx
- 文档编号:8488239
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:8
- 大小:19.13KB
第4章 EXT 窗口和对话框.docx
《第4章 EXT 窗口和对话框.docx》由会员分享,可在线阅读,更多相关《第4章 EXT 窗口和对话框.docx(8页珍藏版)》请在冰豆网上搜索。
第4章EXT窗口和对话框
第4章窗口和对话框
1.视图区ViewPort
在前面的示例中,为了显示一个面板,我们需要在页面上添加一个div,然后把Ext控件渲染到这个div上。
VeiwPort代表整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort实例。
看下面的代码:
Ext.onReady(function(){
newExt.Viewport({
enableTabScroll:
true,
layout:
"fit",
items:
[{title:
"面板",
html:
"",
bbar:
[{text:
"按钮1"},
{text:
"按钮2"}]
}]});
});
Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改变。
Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。
在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也会常用。
看下面的代码:
Ext.onReady(function(){
newExt.Viewport({
enableTabScroll:
true,
layout:
"border",
items:
[{title:
"面板",
region:
"north",
height:
50,
html:
"
网站后台管理系统!
"
},
{title:
"菜单",region:
"west",width:
200,
collapsible:
true,
html:
"菜单栏"
},
{
xtype:
"tabpanel",
region:
"center",
items:
[{title:
"面板1"},
{title:
"面板2"}]
}]
});
});
2.对话框
由于传统使用alert、confirm等方法产生的对话框非常古板,不好看。
因此,ExtJS提供了一套非常漂亮的对话框,可以使用这些对话框代替传统的alert、confirm等,实现华丽的应用程序界面。
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
});
});
Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。
看下面的代码:
执行程序,点击上面的“alert框”按钮,将会在页面上显示一个对话框。
除了alert以外,Ext还包含confirm、prompt、progress、wait等对话框,另外我们可以根据需要显示自下定义的对话框。
普通对话框一般包括四个参数,比如confirm的方法名为confirm( Stringtitle,Stringmsg,[Functionfn],[Objectscope] ),参数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);//if(button=="yes")
alert(text);
});
});
});
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:
",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:
"+text);
}
elsealert("你放弃了录入!
");
});
});
});
下面再看看prompt框,我们看下面的代码:
在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:
functionsave(button)
{
if(button=="yes"){
//执行数据保存操作
}elseif(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});
});
});
show()方法的参数很多,在此列举最常用的配置参数:
1.animEl:
对话框弹出和关闭时的动画效果,比如设置为“id1”,则从id1处弹出并产生动画,收缩则相反
2.buttons:
弹出框按钮的设置,主要有以下几种:
Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CANCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字:
{ok:
"我本来是ok的",cancle:
”wo”}。
若设为false,则不显示任何按钮.
3.closable:
如果为false,则不显示右上角的小叉叉,默认为true。
4.msg:
"消息的内容"
5.title:
"标题"
6.fn:
关闭弹出框后执行的函数
7.icon:
弹出框内容前面的图标,取值为Ext.MessageBox.INFO,
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:
弹出框的宽度,不带单位
9.prompt:
设为true,则弹出框带有输入框
10.multiline:
设为true,则弹出框带有多行输入框
11.progress:
设为true,显示进度条,(但是是死的)
12.progressText:
显示在进度条上的字
13.wait:
设为true,动态显示progress
14.waitConfig:
配置参数,以控制显示progress
3.Ext.MessageBox.show()中的进度条的使用
首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),
注意value为0-1之间的数,表示进度条的进度.
第一种:
(通过进度的大小控制进度,满进度为1)
Ext.get("btn1").on("click",function(){
Ext.MessageBox.show({
title:
"df",
msg:
"dfd",
progress:
true,
width:
300,
closable:
true
});
varf=function(v){
returnfunction(){
if(v==12){
Ext.MessageBox.hide();
//alert("加载完成!
");
}else{
vari=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+"%completed",i);
}
}
}
for(vari=1;i<13;i++)
{
setTimeout(f(i),i*500);//从点击时就开始计时,所以500*i表示每500ms就执行一次
}
}
);
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:
"时间进度条",
msg:
"5s后关闭进度框",
progress:
true,
width:
300,
wait:
true,
waitConfig:
{
interval:
600,
duration:
5000,
fn:
function(){
Ext.MessageBox.hide();//让进度条消失
}},
closable:
true
});
//setTimeout(function(){Ext.MessageBox.hide()},5000);
}
);
第二种:
(通过固定时间控制进度加载)
最后关于那个waitConfig的参数,在此说明下:
1.interval:
进度的频率
2.duration:
执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度框也不会消失。
3.fn:
duration的时间到后执行的函数
4.窗口基本应用
vari=0;
functionnewWin()
{
varwin=newExt.Window(
{title:
"窗口"+i++,
width:
400,
height:
300,
maximizable:
true//最大化
}
);
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
ExtJS中窗口是由Ext.Window类定义,该类继承自Panel,因此窗口其实是一种特殊的面板Panel。
窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。
看下面的代码:
执行上面的代码,当点击按钮“新窗口”的时候,会在页面中显示一个窗口,窗口标题为“窗口x”,窗口可以关闭,可以最大化,点击最大化按钮会最大化窗口,最大化的窗口可以还原。
//几个前面没有介绍的window自己的配置参数
1.closeAction:
枚举值为:
close(默认值),当点击关闭后,关闭window窗口
hide,关闭后,只是hidden窗口
2.closable:
true在右上角显示小叉叉的关闭按钮,默认为true
3.constrain:
true则强制此window控制在viewport,默认为false
4.modal:
true为模式窗口,后面的内容都不能操作,默认为false
5.plain:
//true则主体背景透明,false则主体有小差别的背景色,默认为false
下面只介绍window组件的几个其他特别的配置参数
实例介绍:
var w=new Ext.Window({
contentEl:
"win",
width:
300,
height:
200,
items:
new Ext.TabPanel({
activeTab:
0,//当前标签为第1个tab(从0开始索引)
border:
false,
items:
[{title:
"tab1",html:
"tab1在windows窗口中"},{title:
"tab2",html:
"tab2在windows窗口中"}]//TabPanel中的标签页,以后再深入讨论
}),
plain:
true,//true则主体背景透明,false则主体有小差别的背景色,默认为false
title:
"标题"
});
w.show();
嵌套了tabpanel的window
bbar:
[{text:
"确定"},{text:
"取消",handler:
function(){w.close();}}],//bottom部
buttons:
[{text:
"确定"},{text:
"取消",handler:
function(){w.close();}}],//footer部
buttonAlign:
"center",//footer部按钮排列位置,这里是中间
collapsible:
true,//右上角的收缩按钮
我们通过items把TabPanel组件嵌套在window的主体中去了。
我们在添加工具栏看看
5.窗口分组
vari=0,mygroup;
functionnewWin(){
varwin=newExt.Window(
{title:
"窗口"+i++,
width:
400,
height:
300,
maximizable:
true,
manager:
mygroup});
win.show();
}
functiontoBack(){
mygroup.sendToBack(mygroup.getActive());
}
functionhideAll(){
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=newExt.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
窗口是分组进行管理的,可以对一组窗口进行操作,默认情况下的窗口都在默认的组Ext.WindowMgr中。
窗口分组由类Ext.WindowGroup定义,该类包括bringToFront、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行操作。
看下面的代码:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第4章 EXT 窗口和对话框 窗口 对话框
![提示](https://static.bdocx.com/images/bang_tan.gif)