2.window

1、普通window

    Ext.create('Ext.window.Window',{
        title:'window',
        height:300,
        width:400,
        constrain:true,        //限制窗口不超出浏览器边界
        modal:true ,        //设置一个模态窗口 遮盖下层界面操作
        plain:true ,         //true窗口设置为透明背景
        x:100, //设置窗口坐标位置
        y:100,
        renderTo:Ext.getBody() ,
        draggable:false ,     //不允许拖拽
        resizable:false ,     //不允许改变窗口大小
        closable:false,     //不显示关闭按钮
        collapsible:true ,    //显示折叠按钮
        bodyStyle: 'background:#ffc; padding:10px;' , // 设置样式
        html:'<div style=width:200px;height:200px>我是一个div</div>',
        icon:'js/extjs/icons/used/browser_window.png',                //字符串参数,图片的路径
        //iconCls:'' ,           //CSS样式
        autoScroll:true        //添加滚动条
    }).show();

 实例：点击一个按钮 ,打开一个新的窗体 window重复创建的问题

第一种实现

    var btn=Ext.get('btn');//这个元素是经过Ext包装的一个Ext的Dom对象，获取btn的value值alert(btn.dom.value);
    btn.on('click',function(){
        if(!Ext.getCmp('mywin')){//1、判断是否存在
            Ext.create('Ext.window.Window',{
                id:'mywin' ,        //如果你给组件加了一个id  那么这个组件就会被Ext所管理
                title:'标题',
                height:300,
                width:400,
                renderTo:Ext.getBody()
                //modal:true  //2、直接不允许点击多次
            }).show();
        }
    });//object.on('',function())用于绑定实践

 

第二种实现

    var win = Ext.create('Ext.window.Window',{
                title:'新窗体' , 
                height:300 ,
                width:400 ,
                renderTo:Ext.getBody() ,
                closeAction:'hide'  //closeAction默认是destroy 
    });
    
    Ext.get('btn').on('click',function(){
            win.show();//只调用了显示，不是创建
    });

 

2、window中添加子组件

实例1

    var win = new Ext.window.Window({
        title:"添加子组件实例" , 
        width:'40%' ,
        height:200 , 
        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 Ext.button.Button({
            text:'我是按钮' , 
            handler:function(){
                alert('执行!!');
            }
        })
//        {
//            xtype:'button' , 
//            text:'我是按钮',
//            handler:function(btn){
//                alert('我被点击了');
//                alert(btn.text);
//            }
//        }
        ]
        
    });
    win.show();

 

 实例2

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
                //console.info(btn.ownerCt);
                alert(btn.ownerCt.ownerCt.title);
            }            
        }]        
    });
    win.show();

});

 

 

 3、用windowGroup对象去操作多个window窗口

    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);        //把窗体对象注册给ZindexManger
    }
    
    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){//each循环所有注册组件
                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');    //把当前的组件显示到最后
        }        
    });