ExtJS4 Dialog

一个简单的Dialog

<script type="text/javascript">
        Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function () {
                    Ext.Msg.alert('This is title', 'This is content!');
                }
            });
        });
    </script>

 

 

带回调函数的

 ---》

 Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function () {
                    var button = this;
                    Ext.Msg.alert('This is title', 'This is content!', function () {
                        button.setText("谢谢！");
                    });
                }
            });
        });

 

 confirm窗体

 

Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function () {
                    Ext.Msg.confirm('I have a question', 'Do you like WangJunwei blog?', function (button) {
                        if (button == 'yes') {
                            Ext.Msg.alert('谢谢', '你点击了Yes');
                        }
                        else {
                            Ext.Msg.alert('No', '你点击了NO!');
                        }
                    });
                }
            });
});

 

 

按钮的作用域

Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function () {
                    Ext.Msg.alert('标题', '内容', function () {
                        this.setText("谢谢！");
                    },this);
                }
            });
        });

 

Prompt alert

 

Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function () {
                    Ext.Msg.prompt('Hello', 'Enter you name', function (button, value) {
                        value = value || 'empty string';
                        Ext.getCmp('console').update(
                             Ext.String.format('<pre>Button:{0}<br>Value:{1}</pre>', button, value);
                        );
                    });
                }
            });
            Ext.widget('panel',{
                id:'console',
                width:400,
                margin:'5 0 0 0',
                html:'&nbsp;',
                bodyPadding:0,
                renderTo:document.body
            });
        });

 

Progress Dialog

 

 Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function (button) {
                    button.disable(); //禁用按钮
                    var progress = Ext.Msg.progress('please wait', 'Progress...');
                    var value = 0.0;
                    var interval = setInterval(function () {
                        value += 0.1;
                        progress.updateProgress(Math.min(value, 1));//更新进度
                        if (value >= 1.0) {
                            clearInterval(interval);
                            progress.close();//关闭进度提示
                            button.enable();//按钮可用
                        }
                    }, 500);
                }
            });

});

 

Wait Dialog

Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: document.body,
                handler: function (button) {
                    var progress = Ext.Msg.wait('Please wait 5秒后关闭', 'Progress...');
                    setTimeout(function () {
                        progress.close();
                    },5000);
                }
            });
});

 

Window With Info Icon

buttons和icon的参数，可以查看API中有多个选项

buttons: Ext.Msg.YESNO, 属性返回类型为number

icon: Ext.Msg.INFO, 属性返回为 string的

例如修改：

buttons: Ext.Msg.YESNO,
icon: Ext.Msg.ERROR,

 

Ext.onReady(function () {
            Ext.widget('button', {
                text: 'Click Me',
                renderTo: Ext.getBody(),
                handler: function () {
                    Ext.Msg.show({
                        title: 'Infomation',
                        msg: 'Some info message here!',
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.INFO,
                        fn: function () {
                            Ext.Msg.alert('Callback', '回调函数');
                        }
                    });
                }
            });
        });