ExtJS4 window

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');
                            }
                        }]
                    });
                }
            });
 });