4.Window

示例一：显示Window

show()方法显示window窗口 window是继承panel的

 

Ext.onReady(
    function() {
        new Ext.Window({
            width:300,
            height:300,
            title:"window"
        }).show();
    }
);

 

示例二：打开隐藏后的窗口

resizable:false,(是否可以改变大小，默认可以)
maximizable:true,（是否增加最大化，默认没有）
draggable:false,（是否可以拖动，默认可以）
minimizable:true,（是否增加最小化，默认无）

closeAction属性用来设置关闭按钮操作，有两个可选值，一个为close，一个为hide
如果为close，那么关闭后不能再打开，而hide可以重新打开该窗口

 

Ext.onReady(
    function() {
        var myWindow  = new Ext.Window({
            width:300,
            height:300,
            title:"window",
            closeAction:"hide"
        });
        
        myWindow.show();
        
        Ext.get("showWindow").on("click",function() {
            myWindow.show();    
        }
        )
    }
);

 

控制窗口的关闭和打开

Ext.onReady(
    function() {
        var myWindow  = new Ext.Window({
            width:300,
            height:300,
            title:"window",
            closeAction:"hide"
        });
        myWindow.show();
        
        
        var openWin = Ext.get("openWin");
        openWin.on("click",function() {
            myWindow.show();
        }
        )
        
        var closeWin = Ext.get("closeWin");
        closeWin.on("click",function() {
            myWindow.hide();
        }
        )
    }
);

 

实例三

closable属性用来设置是否显示关闭按钮

 

Ext.onReady(
    function() {
        var myWindow  = new Ext.Window({
            contentEl:hello,
            width:300,
            height:300,
            title:"window",
            closable:false
        });
        
        myWindow.show();
    }
);

 

实例四：控制窗口只能在显示在页面显示区域

constrain属性如果为true则强制此window控制在viewport即浏览器显示区域，默认为false

 

Ext.onReady(
    function() {
        var myWindow  = new Ext.Window({
            contentEl:hello,
            width:300,
            height:300,
            title:"window",
            closable:false,
            constrain:true
        });
        
        myWindow.show();
    }
);

 

示例五：设置窗体主体背景透明

plain属性如果为true则主体背景透明，false则主体有小差别的背景色，默认为false

 

Ext.onReady(
    function() {
        var myWindow  = new Ext.Window({
            contentEl:hello,
            width:300,
            height:300,
            title:"window",
            closable:false,
            constrain:true,
            plain:true
        });
        
        myWindow.show();
    }
);

 

带头部工具栏的窗口

Ext.onReady(
    function() {
        //初始化提示信息
        Ext.QuickTips.init();
        
        var myWindow  = new Ext.Window({
            contentEl:hello,
            width:300,
            height:300,
            title:"window",
            closable:false,
            //头部工具栏
            tools:[
                {id:"save",qtip:"保存"},
                {id:"help",qtip:"帮助"},
                {id:"close",qtip:"关闭",handler:function() {
                        //myWindow.close();
                        myWindow.hide();
                    }
                }
            ]
        });
        
        myWindow.show();
    }
);

 

自定义工具栏图片和提示信息

Ext.onReady(
    function() {
        //初始化提示信息
        Ext.QuickTips.init();
        
        var myWindow  = new Ext.Window({
            contentEl:hello,
            width:300,
            height:300,
            title:"window",
            closable:false,
            //工具栏
            tbar:new Ext.Toolbar({
                height:30
            })
        });
        myWindow.show();
        
        myWindow.getTopToolbar().add(new Ext.Toolbar.Button({icon:"save.jpg",cls:'x-btn-icon',tooltip:"保存"}))//cls:'x-btn-icon'只显示完整图片 tooltip提示信息
        myWindow.getTopToolbar().add(new Ext.Toolbar.Button({icon:"open.jpg",cls:'x-btn-icon',tooltip:"打开"}))
        
    }
);

 

自定义菜单栏图片

Ext.onReady(
    function() {
        
        var myWindow  = new Ext.Window({
            contentEl:hello,
            width:300,
            height:300,
            title:"window",
            closable:false,
            //工具栏
            tbar:new Ext.Toolbar({
                height:30
            })
        });
        myWindow.show();
        
        var mymenu = new Ext.menu.Menu({
            items:[
                {text:"打开",icon:"open.jpg"},
                {text:"保存",icon:"save.jpg"}
            ]
        });
        
        myWindow.getTopToolbar().add(new Ext.Toolbar.SplitButton({text:"文件",menu:mymenu}));
    }
);

 

窗口分组。

窗口是可以分组进行管理的，默认情况下的窗口都在默认的组 Ext.WindowMgr中。

窗口分组由类Ext.WindowGroup定义，该类包括bringToFront、getActive、 hideAll、sendToBack等方法用来对分组中的窗口进行操作

var i = 1;
var mygroup;
function newWindow() {
    var myWindow  = new Ext.Window({
        width:300,
        height:300,
        title:"window" + i++,
        closable:false,
        manager:mygroup //将当前创建的窗体所属创建分组中
    });
    myWindow.show();
}

function toBack() {
    mygroup.sendToBack(mygroup.getActive());
}

function hideAll() {
    mygroup.hideAll();
}

Ext.onReady(
    function() {
        mygroup=new Ext.WindowGroup();//分组
        Ext.get("newWin").on("click",newWindow);
        Ext.get("toback").on("click",toBack);
        Ext.get("hideAll").on("click",hideAll);
    }
);