欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>extjs教程

目录导航

ExtJs2.0学习系列(3)--Ext.Window

香港高防(5G)机房 发布于 2011-03-20  
extjs教程

今天将介绍window组件,它继承自panel。 先介绍个最简单例子

//html代码

<div id="win" class="x-hidden">

//js代码

var w=new Ext.Window({

contentEl:"win",//主体显示的html元素,也可以写为el:"win"

width:300,

height:200,

title:"标题"

});

w.show();

ExtJs2.0学习系列(3)--Ext.Window-图片1
ExtJs2.0学习系列(3)--Ext.Window-图片1

参数介绍:

因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数

//几个前面没有介绍的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

//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的

w.show()

实例介绍:

1.嵌套了tabpanel的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();

ExtJs2.0学习系列(3)--Ext.Window-图片2
ExtJs2.0学习系列(3)--Ext.Window-图片2

我们通过items把TabPanel组件嵌套在window的主体中去了。

我们在添加工具栏看看

// bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部

buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部

buttonAlign:"center",//footer部按钮排列位置,这里是中间

// collapsible:true,//右上角的收缩按钮

ExtJs2.0学习系列(3)--Ext.Window - 零度科技

其他工具栏方法一样。

关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明。

原文来自零度科技:http://www.ldisp.com/a/extjs/2011/860.shtml

上一篇:Extjs给TextField赋值
下一篇:没有了

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

380

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理