modal:true,弹出后原页面变灰不可编辑
window事件:
listeners : { "minimize":function(){ Ext.Msg.alert("提示","最小化"); }, "beforehide" : function() { Ext.Msg.alert("提示", "要隐藏吗?"); // return true; }, "show":function(){ // Ext.Msg.alert("提示","你好!我来也。"); }, "hide" : function() { Ext.Msg.alert("提示", "再见!"); } "close":function(){ Ext.Msg.alert("提示","窗口关闭!"); mainWindow.destroy(); } },
listeners : { "minimize":function(){ Ext.Msg.alert("提示","最小化"); }, "beforehide" : function() { Ext.Msg.alert("提示", "要隐藏吗?"); // return true; }, "show":function(){ // Ext.Msg.alert("提示","你好!我来也。"); }, "hide" : function() { Ext.Msg.alert("提示", "再见!"); } "close":function(){ Ext.Msg.alert("提示","窗口关闭!"); mainWindow.destroy(); } },
第一个组件:Ext.window.Window。对于组件,也就是Ext最吸引开发者的地方。
- xtype:组件的别名
- Hierarchy 层次结构
- Inherited mixins 混入的类
- Requires 该组件需要使用的类
- configs:组件的配置信息
- properties:组件的属性
- methods:组件的方法
例2: 在window中添加子组件,并讲解常用查找组件的方式:
重点分析:该实例主要针对于组件的查找进行详细的讲解,在以后的应用开发中,应该学会各种方式去查找所需要的组件,不要拘泥于某种特定形式,这样会给开发思路带来很多好处。
- ownerCt
- up/down方法
- Ext.getCmp方法
操作子组件:
重点分析:该实例主要目的针对于特殊需求进行具体的实现,利用windowGroup去操作多个窗体同步执行某些任务,这有点类似于javascript里的组合模式,原理就是上级负责执行一个动作但并不真正去执行,而是分别传递给所有的下级组件去具体执行。
- register
- hideAll
- each
- xtype:组件的别名
- Hierarchy 层次结构
- Inherited mixins 混入的类
- Requires 该组件需要使用的类
- configs:组件的配置信息
- properties:组件的属性
- methods:组件的方法
- events:组件的事件
- Ext.onReady(function(){
- //Ext.create方法相当于创建一个实例对象
- Ext.create('Ext.window.Window',{
- title:'我的第一个组件',
- width:400, //Number型,也可以是字符串类型 width:'90%'
- height:300,
- layout:'fit',
- renderTo:Ext.getBody() //新创建的组件 渲染到什么位置
- }).show(); //需要此方法,因为默认是隐藏的
- });
Ext.onReady(function(){
//Ext.create方法相当于创建一个实例对象
Ext.create('Ext.window.Window',{
title:'我的第一个组件',
width:400, //Number型,也可以是字符串类型 width:'90%'
height:300,
layout:'fit',
renderTo:Ext.getBody() //新创建的组件 渲染到什么位置
}).show(); //需要此方法,因为默认是隐藏的
});
window组件常用属性和方法讲解:
configs:
- constrain:布尔值,true为限制窗口只能在其容器内移动,默认值为false,允许窗口在任何位置移动。(另:constrianHeader属性)
- modal:布尔值,true为设置模态窗口。默认为false
- plain:布尔值,true为窗口设置透明背景。false则为正常背景,默认为false
- x、y 设置窗口左上角坐标位置。
- onEsc:复写onEsc函数,默认情况下按Esc键会关闭窗口。
- closeAction:string值,默认值为'destroy',可以设置'hide'关闭时隐藏窗口
- autoScroll:布尔值,是否需要滚动条,默认false
- Ext.onReady(function(){
- //Ext.create方法相当于创建一个实例对象
- Ext.create('Ext.window.Window',{
- title:'我的第一个组件',
- width:400, //Number型,也可以是字符串类型 width:'90%'
- height:300,
- layout:'fit',
- constrain:true, //限制窗口不超出浏览器边界
- constrainHeader:true, // 不允许该窗体标题超出浏览器边界
- modal:true, //设置一个模态窗口
- plain:true,
- icon:'js/ExtJs/icons/used/browser_window.png', //图片路径
- iconCls:'', //css样式
- x:50,
- y:50,
- html:'<div style=width:200px;height=200px>我是一个div</div><div style=width:200px;height=200px>我是第二个div</div>',
- autoScroll:true,
- renderTo:Ext.getBody() //新创建的组件 渲染到什么位置
- }).show(); //需要此方法,因为默认是隐藏的
- });
Ext.onReady(function(){
//Ext.create方法相当于创建一个实例对象
Ext.create('Ext.window.Window',{
title:'我的第一个组件',
width:400, //Number型,也可以是字符串类型 width:'90%'
height:300,
layout:'fit',
constrain:true, //限制窗口不超出浏览器边界
constrainHeader:true, // 不允许该窗体标题超出浏览器边界
modal:true, //设置一个模态窗口
plain:true,
icon:'js/ExtJs/icons/used/browser_window.png', //图片路径
iconCls:'', //css样式
x:50,
y:50,
html:'<div style=width:200px;height=200px>我是一个div</div><div style=width:200px;height=200px>我是第二个div</div>',
autoScroll:true,
renderTo:Ext.getBody() //新创建的组件 渲染到什么位置
}).show(); //需要此方法,因为默认是隐藏的
});
•
ExtWeb实战300例:
–
例1:点击按钮打开一个window,window重复创建的问题
•
重点分析:这个问题是初学者经常会犯错的地方,一般来说简单的代码不会产生此问题,但是如果以后代码复杂以后,这个问题如果发生调试起来会非常麻烦!!
- Ext.onReady(function(){
- //ex001:点击一个按钮,打开一个新的窗体
- //JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
- var btn = Ext.get('btn'); //这个元素是经过Ext包装的一个Ext的Dom对象
- alert(btn.value); //undefined
- alert(btn.dom.value);
- btn.on('click',function(){
- if(!Ext.getCmp('mywin')){
- Ext.create('Ext.window.Window',{
- id:'mywin', //如果给组件加了一个id,那么这个组件就会被Ext所管理
- title:'新窗体',
- height:200,
- width:300,
- renderTo:Ext.getBody()
- // modal:true
- }).show();}
- });
- });
Ext.onReady(function(){
//ex001:点击一个按钮,打开一个新的窗体
//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
var btn = Ext.get('btn'); //这个元素是经过Ext包装的一个Ext的Dom对象
alert(btn.value); //undefined
alert(btn.dom.value);
btn.on('click',function(){
if(!Ext.getCmp('mywin')){
Ext.create('Ext.window.Window',{
id:'mywin', //如果给组件加了一个id,那么这个组件就会被Ext所管理
title:'新窗体',
height:200,
width:300,
renderTo:Ext.getBody()
// modal:true
}).show();}
});
});
第二种实现:
- var win = Ext.create('Ext.window.Window',{
- id:'mywin', //如果给组件加了一个id,那么这个组件就会被Ext所管理
- title:'新窗体',
- height:200,
- width:300,
- renderTo:Ext.getBody(),
- closeAction:'hide' //closeAction默认是destroy,销毁
- });
- Ext.get('btn').on('click',function(){
- win.show();
- });
var win = Ext.create('Ext.window.Window',{
id:'mywin', //如果给组件加了一个id,那么这个组件就会被Ext所管理
title:'新窗体',
height:200,
width:300,
renderTo:Ext.getBody(),
closeAction:'hide' //closeAction默认是destroy,销毁
});
Ext.get('btn').on('click',function(){
win.show();
});
例2: 在window中添加子组件,并讲解常用查找组件的方式:
重点分析:该实例主要针对于组件的查找进行详细的讲解,在以后的应用开发中,应该学会各种方式去查找所需要的组件,不要拘泥于某种特定形式,这样会给开发思路带来很多好处。
- ownerCt
- up/down方法
- Ext.getCmp方法
添加子组件:
- Ext.onReady(function(){
- //在组件中添加子组件,并进行一系列针对于组件的操作
- var win = new Ext.window.Window({
- title:'添加子组件',
- width:400,
- height:300,
- renderTo:Ext.getBody(),
- draggable:false, //不允许拖拽
- resizable:false, //不允许改变大小
- closable:false, //不显示关闭按钮
- collapsible:true, //允许折叠
- bodyStyle:'background:#ffc;padding:10px', //设置样式
- html:'我是window的内容',
- //Ext items(array) 配置子组件的配置项
- items:[{
- //Ext的组件给我们提供了一个简单地写法 xtype属性去创建组件
- xtype:'panel',
- width:'50%',
- height:100,
- html:'我是面板'
- },
- //第二种方法,直接new一个对象
- new Ext.button.Button({
- text:'我是按钮new',
- handler:function(){
- alert('我被点击了');
- alert(this.text);
- }
- })
- // { //第一种方法,使用xtype声明
- // xtype:'button',
- // text:'我是按钮',
- // handler:function(btn){
- // alert('我被点击了');
- // alert(btn.text);
- // }
- //
- // }
- ]
- });
- win.show();
- });
Ext.onReady(function(){
//在组件中添加子组件,并进行一系列针对于组件的操作
var win = new Ext.window.Window({
title:'添加子组件',
width:400,
height:300,
renderTo:Ext.getBody(),
draggable:false, //不允许拖拽
resizable:false, //不允许改变大小
closable:false, //不显示关闭按钮
collapsible:true, //允许折叠
bodyStyle:'background:#ffc;padding:10px', //设置样式
html:'我是window的内容',
//Ext items(array) 配置子组件的配置项
items:[{
//Ext的组件给我们提供了一个简单地写法 xtype属性去创建组件
xtype:'panel',
width:'50%',
height:100,
html:'我是面板'
},
//第二种方法,直接new一个对象
new Ext.button.Button({
text:'我是按钮new',
handler:function(){
alert('我被点击了');
alert(this.text);
}
})
// { //第一种方法,使用xtype声明
// xtype:'button',
// text:'我是按钮',
// handler:function(btn){
// alert('我被点击了');
// alert(btn.text);
// }
//
// }
]
});
win.show();
});
操作子组件:
- //在组件中操作子组件
- var win = new Ext.Window({
- id:'mywin',
- title:'操作组件的形式',
- width:500,
- height:300,
- renderTo:Ext.getBody(),
- //表示在当前组件的top位置添加一个工具条,工具条中包含几个按钮,使用数组形式
- tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbar fbar(footbar))
- text:'按钮1',
- handler:function(btn){
- //组件都会有up和down这两个方法,表示向上或向下查找,需要参数是组件的xtype或者选择器
- alert(btn.up('window').title);
- }
- },{
- text:'按钮2',
- handler:function(btn){
- //最常用的方式
- alert(Ext.getCmp('mywin').title);
- }
- },{
- text:'按钮3',
- handler:function(btn){
- //以上一级组件的形式去查找OwnerCt
- alert((btn.ownerCt.ownerCt).title);
- }
- }]
- });
- win.show();
//在组件中操作子组件
var win = new Ext.Window({
id:'mywin',
title:'操作组件的形式',
width:500,
height:300,
renderTo:Ext.getBody(),
//表示在当前组件的top位置添加一个工具条,工具条中包含几个按钮,使用数组形式
tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbar fbar(footbar))
text:'按钮1',
handler:function(btn){
//组件都会有up和down这两个方法,表示向上或向下查找,需要参数是组件的xtype或者选择器
alert(btn.up('window').title);
}
},{
text:'按钮2',
handler:function(btn){
//最常用的方式
alert(Ext.getCmp('mywin').title);
}
},{
text:'按钮3',
handler:function(btn){
//以上一级组件的形式去查找OwnerCt
alert((btn.ownerCt.ownerCt).title);
}
}]
});
win.show();
例3: windowGroup对象 操作window组
重点分析:该实例主要目的针对于特殊需求进行具体的实现,利用windowGroup去操作多个窗体同步执行某些任务,这有点类似于javascript里的组合模式,原理就是上级负责执行一个动作但并不真正去执行,而是分别传递给所有的下级组件去具体执行。
- register
- hideAll
- each
- Ext.onReady(function(){
- //用windowGroup对象去操作多个window窗口(4.0后,叫做ZIndexManager)
- var wingroup = new Ext.WindowGroup();
- for(var i = 1; i<= 5;i++){
- var win = Ext.create('Ext.Window',{
- title:'第' + i + '个窗口',
- id:'win_' + i,
- width:300,
- height:300,
- renderTo:Ext.getBody()
- });
- win.show();
- wingroup.register(win); //把窗体对象注册给ZIndexManager
- }
- var btn1 = Ext.create('Ext.button.Button',{
- text:'全部隐藏',
- renderTo:Ext.getBody(),
- handler:function(){
- wingroup.hideAll(); //隐藏所有被管理起来的window组件
- }
- });
- var btn2 = new Ext.button.Button({
- text:'全部显示',
- renderTo:Ext.getBody(),
- handler:function(){
- wingroup.each(function(cmp){
- cmp.show();
- });
- }
- });
- var btn3 = new Ext.button.Button({
- text:'把第三个窗口显示最前',
- renderTo:Ext.getBody(),
- handler:function(){
- wingroup.bringToFront('win_3'); //把当前组件显示到最前端
- }
- });
- var btn4 = new Ext.button.Button({
- text:'把第五个窗口显示在最后',
- renderTo:Ext.getBody(),
- handler:function(){
- wingroup.sendToBack('win_5'); //把当前组件显示到最后
- }
- });
- });
Ext.onReady(function(){
//用windowGroup对象去操作多个window窗口(4.0后,叫做ZIndexManager)
var wingroup = new Ext.WindowGroup();
for(var i = 1; i<= 5;i++){
var win = Ext.create('Ext.Window',{
title:'第' + i + '个窗口',
id:'win_' + i,
width:300,
height:300,
renderTo:Ext.getBody()
});
win.show();
wingroup.register(win); //把窗体对象注册给ZIndexManager
}
var btn1 = Ext.create('Ext.button.Button',{
text:'全部隐藏',
renderTo:Ext.getBody(),
handler:function(){
wingroup.hideAll(); //隐藏所有被管理起来的window组件
}
});
var btn2 = new Ext.button.Button({
text:'全部显示',
renderTo:Ext.getBody(),
handler:function(){
wingroup.each(function(cmp){
cmp.show();
});
}
});
var btn3 = new Ext.button.Button({
text:'把第三个窗口显示最前',
renderTo:Ext.getBody(),
handler:function(){
wingroup.bringToFront('win_3'); //把当前组件显示到最前端
}
});
var btn4 = new Ext.button.Button({
text:'把第五个窗口显示在最后',
renderTo:Ext.getBody(),
handler:function(){
wingroup.sendToBack('win_5'); //把当前组件显示到最后
}
});
});
-
顶
- 0
-
踩
- 0
我的同类文章
http://blog.csdn.net
- •EXTJS4 新特性之Ext.data.Model2014-09-25
- •11、ExtJs——数据模型2014-09-25
- •9、ExtJs——Ext基础架构--事件机制2014-09-24
- •7、ExtJs——Ext基础架构--动态加载js文件--很重要2014-09-19
- •5、ExtJs——Ext基础架构--define定义一个类2014-09-17
- •12、ExtJs——数据代理-proxy2014-09-25
- •10、ExtJs——类的声明、对象创建及关键字2014-09-24
- •8、ExtJs——Ext基础架构--Ext操作DOM2014-09-23
- •6、ExtJs——Ext基础架构--认识Ext.js和Ext-more.js2014-09-19
- •3、ExtJs——JavaScript基础2014-09-16
- Extjs在Asp.Net中的应用开发
- Windows Server 2012 Hyper-v 管理
- Windows Server 2012 高可用性管理
- 在Windows下SVN的版本管理与实战
-
Windows Server 2012 DHCP Server 管理
- ExtJS 常见问题解答
- javascript变量的作用域--ExtJS scope必备法宝
- EXTNET复杂布局二报表
- Extjs的作用域讲解转载
- JAVA开发全集
更多资料请参考:
猜你在找
核心技术类目
全部主题
Hadoop
AWS
移动游戏
Java
Android
iOS
Swift
智能硬件
Docker
OpenStack
VPN
Spark
ERP
IE10
Eclipse
CRM
JavaScript
数据库
Ubuntu
NFC
WAP
jQuery
BI
HTML5
Spring
Apache
.NET
API
HTML
SDK
IIS
Fedora
XML
LBS
Unity
Splashtop
UML
components
Windows Mobile
Rails
QEMU
KDE
Cassandra
CloudStack
FTC
coremail
OPhone
CouchBase
云计算
iOS6
Rackspace
Web App
SpringSide
Maemo
Compuware
大数据
aptech
Perl
Tornado
Ruby
Hibernate
ThinkPHP
HBase
Pure
Solr
Angular
Cloud Foundry
Redis
Scala
Django
Bootstrap
暂无评论