Ext JS 学习(3) Ext.Window 组件的使用
来源:互联网 发布:linux服务器扫描工具 编辑:程序博客网 时间:2024/05/07 02:22
今天将介绍window组件,它继承自panel。
先介绍个最简单例子
//html代码
<div id="win" class="x-hidden">
</div>
<div id="win" class="x-hidden">
</div>
//js代码
var w=new Ext.Window({
contentEl:"win",//主体显示的html元素,也可以写为el:"win"
width:300,
height:200,
title:"标题"
});
w.show();
var w=new Ext.Window({
contentEl:"win",//主体显示的html元素,也可以写为el:"win"
width:300,
height:200,
title:"标题"
});
w.show();
参数介绍:
因为前面已经介绍了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
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()
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();
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();
我们通过items把TabPanel组件嵌套在window的主体中去了。
我们在添加工具栏看看
// bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部
buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部
buttonAlign:"center",//footer部按钮排列位置,这里是中间
// collapsible:true,//右上角的收缩按钮
buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部
buttonAlign:"center",//footer部按钮排列位置,这里是中间
// collapsible:true,//右上角的收缩按钮
其他工具栏方法一样。
关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明。
- Ext JS 学习(3) Ext.Window 组件的使用
- Ext JS 学习(2) Ext.Panel 组件的使用
- Ext.window.Window组件的学习
- Ext JS 学习(6) Ext.FormPanel 组件的使用第三式(Combo的使用)
- Ext JS 学习(4) Ext.FormPanel 组件的使用第一式
- Ext.js 组件的简单应用——【Window】和【HtmlEditor】结合使用
- Ext JS 学习(7) Ext.FormPanel 组件的使用第四式(CheckBox, Radio, HtmlEditor,DateField等组件)
- Ext JS 学习(1) Ext.MessageBox.show()方法的使用
- Ext JS 学习(11) Ext.Template的使用
- Ext JS 学习(12) Ext.TreePanel的使用 第一式
- Ext JS 学习(5) Ext.FormPanel 组件的使用第二式(fieldset的使用, ExtJS表单验证模式)
- Ext JS 学习(8) Ext.FormPanel 组件的使用第五式(FormPanel的综合使用,提交页面到后台)
- Ext.Window组件
- Ext Js入门第11篇-使用Ext.window.Window和Ext.window.MessageBox创建对话框
- 使用Ext实现js的继承,以及扩展Ext组件的思路
- Ext JS 6学习文档-第3章-基础组件
- Ext JS 6学习文档-第3章-基础组件
- Ext JS的Html标签与Ext组件的交互
- MYSQL 的 MASTER到MASTER的主主循环同步
- 我到底做错什么了。。。1029
- 面试题库
- 10.29 学习笔记
- 【站长经验】使用网摘使网站点击量增加
- Ext JS 学习(3) Ext.Window 组件的使用
- java 基础问题
- Javascript代码亲密接触
- 关于三棱球
- QQ过滤tinyurl.com的链接
- 马云面向青年演讲:阿里巴巴是如何炼成的
- 10 行代码判定色*情*图片
- 在windows下实现openvpn的user/pass及证书验证
- 轻松搞定C++内存泄漏