Extjs4

Ext.window.Window。对于组件，也就是Ext最吸引开发者的地方，那么我们要真正的使用Ext的组件，首先必须学会阅读API文档。
 xtype：组件的别名
 Hierarchy 层次结构
 Inherited mixins 混入的类
 Requires 该组件需要使用的类
 configs：组件的配置信息
 properties：组件的属性
 methods：组件的方法
 events：组件的事件
1.Ext.onReady：
 　　这个方法是Ext的准备函数，也就是Ext相关的代码都会在这个函数里书写，它比较类似于window的onload方法，但是注意其执行时机是在页面的DOM对象加载完毕之后立即执行。
　　 Ext.onReady(function(){
 　　 Ext.Msg.alert("提示","hello world");
　　 });
2.messageBox
 　　Ext.MessageBox是一个工具类，提供了各种风格的信息提示对话框，也可以简写为Ext.Msg,这在Ext中很常见,很多组件或类都可以使用简写形式。
 　　alert方法
 　　confirm方法
 　　prompt方法
 　　wait方法
 　　show方法

　　function myMsg(){
　　　　　　// wait方法
　　　　　　Ext.Msg.wait('提示信息','我是内容',{
　　　　　　 interval:400,// 循环定时的间隔
 　　　　　　duration:2000,// 总时长
 　　　　　　increment:5,// 执行的次数
　　　　　　 text:'更新中...',
 　　　　　　scope:this,
 　　　　　　fn:function(){alert()},
　　　　　　 animate:true// 更新渲染时提供一个平滑的效果
　　　　　　});
　　　　　　// show方法
 　　　　　　　　Ext.Msg.show({
 　　　　　　　　 title:'show',
  　　　　　　　　msg:'msg',
 　　　　　　　　 width:300,
 　　　　　　　　 heihgt:300,
  　　　　　　　　buttons:Ext.Msg.YESNOCANCEL,
  　　　　　　　　icon:Ext.Msg.ERROR// Error,info,question,warning
 　　　　　　　　});
}

3.window
 　　window组件常用属性和方法讲解:
 　　configs:
 　　constrain:布尔值，true为限制窗口只能在其容器内移动，默认值为false，允许窗口在任何位置移动。(另：constrianHeader属性)
　　 modal:布尔值，true为设置模态窗口。默认为false
 　　plain：布尔值，true为窗口设置透明背景。false则为正常背景，默认为false
 　　x、y 设置窗口左上角坐标位置。
 　　onEsc：复写onEsc函数，默认情况下按Esc键会关闭窗口。
　　 closeAction：string值，默认值为'destroy'，可以设置'hide'关闭时隐藏窗口
 　　autoScroll：布尔值，是否需要滚动条，默认false

function myWindowTest3(){
　　　　 var win=new Ext.window({
　　　　  id:'myWin',
　　　　  title:'我是窗口',
　　　　  width:500,
　　　　  height:300,
　　　　  renderTo:Ext.getBody(),
 　　　　 tbar:[//bbar,lbar,rbar,fbar
  　　　　　　 {text:'按钮1',
   　　　　　　 handler:function(btn){
    　　　　　　 //組件都會有up,down这两个方法（表示向上，或者向下查找）需要的参数是组件的xtype或者是选择器
     　　　　　　alert(btn.up('window').title);//window是xtype
   　　　　　　 }},

　　　　　　　　{text:'按钮2',
   　　　　　　  handler:function(btn){
  　　　　　　　　  Ext.getCmp('myWin').title;
   　　　　　　　　} },

　　　　　　　　{text:'按钮3',
  　　　　　　　　 handle:function(btn){
    　　　　　　　　//以上一级组件的形式去查找ownerCt
    　　　　　　　　alert(btn.ownerCt.ownerCt.title);//btn.ownerCt是tbar }}]
 }); 
}

function myWindowTest2(){
 　　　　// 在组件中添加子组件，并进行组件的一系列针对于组件的操作
 　　　　var win=new Ext.window.Window({
  　　　　title:'myWin2',
  　　　　width:'20%',
  　　　　height:300,
  　　　　draggable:false,// 不允许拖拽
  　　　　resizable:false,// 不允许改变大小
  　　　　closeable:false,// 不显示关闭按钮
  　　　　collapsible:true,// 显示折叠按钮
  　　　　bodyStyle:'background:#ffc',// 或者padding
  　　　　html:'window',
  　　　　items:[{
  　　　　// Ext的组件给我们提供了一个简单的写法 xtype属性去创建组件
  　　　　 xtype:'panel',
  　　　　 width:'50%',
  　　　　 height:100,
  　　　　 html:'我是面板'
 　　　　 },
  　　　　 {
   　　　　 xtype:'button',
   　　　　 text:'我是按钮',
   　　　　 handler:function(btn){
    　　　  alert(btn.text); }
  　　　　　　  // 或者：new Ext.button.Button({
　　　　　　　　//    text:'我是按钮',
　　　　　　　　//    handler:function(btn){}
　　　　　　　　// });
    　　}],// 子组件
 　　　　 renderTo:Ext.getBody()
 　　});
}

function myWindowTest1(){
 /**
  * 方式一：
  */
 
　　　　 // 点击一个按钮，打开一个窗体
 　　　　var btn=Ext.get("btn");
 　　　　btn.on('click',function(){
 　　　　 if(!Ext.getCmp('myWin')){// 第二种方法，避免创建多个窗口
  　　　　 Ext.create('ext.window.Window',{
  　　　　 id:'myWin',// 如果创建多个窗口，使用同一个id,那么这个组件就会别Ext所管理
  　　　　title:'新窗口',
 　　　　 height:300,
 　　　　 width:400,
 　　　　 renderTo:Ext.getBody()
 　　　　 // modal:true//避免创建多个窗口，避免多个窗口同一个布局中，难看
 　　　　 }).show();
}
 });
 /**
  * 方式二
  */
 　　Ext.create('ext.window.Window',{
 　　　　 title:'新窗口',
 　　　　 height:300,
  　　　　width:400,
  　　　　closeAction:'hide',// 默认destroy,关闭按钮
  　　　　renderTo:Ext.getBody()
  　　　　}).show();
 　　　　Ext.get('btn').on('click',function(){
 　　　　 win.show();
　　　　 }); 
}
function myWindow(){
 　　// Ext.create相当于创建一个实例对象
 　　Ext.create('Ext.window,Window',{
 　　title:'我的第一个组件window',
 　　width:400,// Number/String(百分比)
 　　height:300,
 　　layout:'fit',
 　　constrain:true,// 在父组件内移动
 　　constrainHeader:true,// 标题不能超出父组件
 　　modal:true,// 设置模态窗口
 　　plain:true,// 窗口透明背景
 　　x:50,// x坐标
 　　y:50,// y坐标
 　　onEsc:function(){this.close()},// Esc键
 　　html:'html',// html内容
 　　autoScroll:true,// 添加滚动条
 　　icon:'',
 　　// iconCls:'',//css样式
 　　renderTo:Ext.getBody()
 }).show();

}