extjs4 window设置

来源：互联网发布：人工智能方面的书籍编辑：程序博客网时间：2024/05/10 12:54

closable: false 是否可关闭
autoShow: true, 默认显示出窗体
resizable: true,是否可拖动窗体的大小

draggable: true是否可以拖动窗体

Simple Window

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    var win = Ext.widget('window', {                        title: 'Simple Window',                        width: 300,                        height: 200                    });                    win.show();                }            });});

Modal Window

modal:true 窗体弹出后会出现遮罩层遮罩住下面的按钮！

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    var win = Ext.widget('window', {                        title: 'Modal Window',                        width: 300,                        height: 200,                        autoShow: true,                        modal:true                    });                }            });        });

Reusable Window 可再度使用的

closeAction: 'hide' 设置此属性后 点击顶部的X号关闭按钮，其实是隐藏当前的窗体，并不是销毁掉了。因此下次在点击按钮的时候，窗体从隐藏的状态又显示出来。

Ext.onReady(function () {            var win = Ext.widget('window', {                title: 'My Window',                width: 300,                height: 200,                closeAction: 'hide'            });            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    win.show();                }            });        });

Window With OK-Cancel Buttons 包含确定和关闭的按钮的

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    Ext.widget('window', {                        title: 'Test Window',                        width: 300,                        height: 200,                        autoShow: true,                        buttons: [{                            text: '确定',                            handler: function () {                                 Ext.Msg.alert('Info','点击了确定按钮',function(){                                    this.up('window').close();                                },this);                            }                        },{                            text:'关闭',                            handler:function(){                                this.up('window').close();                            }                        }]                    });                }            });        });

Window With HTML Content

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    Ext.widget('window', {                        title: 'Test Window',                        width: 300,                        height: 200,                        autoShow: true,                        bodyPadding: 10,                        bodyStyle: {'background-color':'white'},                        html:'这是<b>HTML</b>的内容'                    });                }            });        });

Window With Toolbars

tbar：top bar简写

bbar：bottom bar简写

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    Ext.widget('window', {                        title: 'Test Window',                        width: 300,                        height: 200,                        autoShow: true,                        bodyPadding: 10,                        tbar: [                            {                                text: 'tbar button',                                handler: function () {                                    this.up('window').update('点击了tbar按钮');                                }                            }                        ],                        bbar: [{                            text: 'bbar button',                            handler: function () {                                this.up('window').update('点击了bbar按钮');                            }                        }],                        bodyStyle: {'background-color':'white'},                        html:'我是默认的内容'                                            });                }            });        });

Window With Header Tools 顶部工具栏

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    Ext.widget('window', {                        title: 'Test Window',                        width: 300,                        height: 200,                        autoShow: true,                        tools: [{                            type: 'refresh',                            tooltip: '刷新',                            handler: function () {                                this.up('window').update("点击了刷新按钮");                            }                        }, {                            type: 'help',                            tooltip: '帮助',                            handler: function () {                                this.up('window').update('点击了帮助按钮');                            }                        }, {                            type: 'search',                            tooltip: '查询',                            handler: function () {                                this.up('window').update('点击了查询按钮');                            }                        }]                    });                }            });        });

How To Prevent Window From Closing On ESC

默认打开window后，可以通过键盘上的ESC来关闭Window。如果想防止的话可以设置下面的属性即可。

onEsc: Ext.emptyFn

Confirm Window Closing 关闭窗体时，弹出是否确认关闭的提示

Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    Ext.widget('window', {                        title: 'Test window',                        width: 300,                        height: 300,                        autoShow: true,                        onEsc: Ext.emptyFn,                        listeners: {                            beforeclose: function () {                                if (this.confirmed == true) {                                    this.configed = false;                                    return true;                                }                                Ext.Msg.confirm('Test Window Closing', 'Are you sure ?', function (button) {                                    if (button == "yes") {                                        this.confirmed = true;                                        this.close();                                    }                                }, this);                                return false;                            }                        }                    });                }            });        });

How To Reload Window Content

点击Reload时加载其他页面返回的数据，点击Reset时更改Window的内容

 Ext.onReady(function () {            Ext.widget('button', {                text: 'Click Me',                renderTo: Ext.getBody(),                handler: function () {                    Ext.widget('window', {                        title: 'Test window',                        width: 300,                        height: 300,                        autoShow: true,                        bodyStyle:{'background-color':'#ffffff','padding':'10px'},                        autoLoad:{url:'a.ashx'},                        tbar:[{                            text:'Reload',                            handler:function(){                                var win=this.up("window");                                win.loader.load(win.autoLoad.url);                            }                        },{                            text:'Reset',                            handler:function(){                                var win=this.up("window");                                win.update('<b>init</b> content');                            }                        }]                    });                }            }); });