第一个组件：Ext.window.Window。对于组件，也就是Ext最吸引开发者的地方。
- 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(); //需要此方法，因为默认是隐藏的
});
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(); //需要此方法，因为默认是隐藏的
});
•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();}
});
});
第二种实现：
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();
});
操作子组件：
//在组件中操作子组件
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'); //把当前组件显示到最后
}
});
});