ExtJS学习第一天 MessageBox

首页 > 代码库 > ExtJS学习第一天 MessageBox

2024-07-17 16:27:51 218人阅读

此文用来记录学习笔记；

•学习任何技术，首先都要从Helloworld开始，那么我们首要任务就是写一个简单的HelloWorld程序，带领同学们走进ExtJS的世界。

•Ext.onReady：这个方法是Ext的准备函数，也就是Ext相关的代码都会在这个函数里书写，它比较类似于window的onload方法，但是注意其执行时机是在页面的DOM对象加载完毕之后立即执行。

•Ext.window.MessageBox：这个类提供了ExtJS的弹出提示框、确认框等简单的小组件。我们首先根据它写出我们的Helloworld.

•Ext.MessageBox是一个工具类，提供了各种风格的信息提示对话框，也可以简写为Ext.Msg,这在Ext中很常见,很多组件或类都可以使用简写形式。

–alert方法

–confirm方法

–prompt方法

–wait方法

–show方法

•学习意见:学习ExtJS是一个长期积累的过程，我们以后应该多去查看官方API，多去阅读底层源码，以深入我们对ExtJS的了解。

 1 //Ext.onReady 准备函数 类似于window.onload 2 Ext.onReady(function () { 3     //提示信息 4         Ext.MessageBox.alert(‘我是标题!‘ , ‘Hello World!‘ , function(){ 5             console.info(this); 6             alert(‘我是回调函数!‘); 7         } , this); 8         Ext.Msg.alert(‘提示信息‘,‘ExtJS!!!‘); 9     //alert(‘执行‘);10     11         //询问框12         Ext.Msg.confirm(‘提示信息‘,‘确认删除该条记录么?‘,function(op){13                 // yes  on14                 if(op == ‘yes‘){15                     alert(‘确认了!‘);16                 } else {17                     alert(‘取消了!‘);18                 }19         });20     21     //输入框22     //String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value]23         Ext.Msg.prompt(‘我是标题!‘,‘请输入姓名:‘ , function(op , val){24             //op  ok cancel25             console.info(op);26             console.info(val);27         } , this , true , ‘张三‘);28 29     //等待框 30         Ext.Msg.wait(‘提示信息‘,‘我是内容‘ ,{31                interval: 400,             //循环定时的间隔32                duration: 2000,            //总时长33                increment: 5,            //执行进度条的次数34                text: ‘更新中,请稍后...‘,    //进度条上的文字35                scope: this,36                fn: function(){37                     alert(‘更新成功!‘);38                },39                animate:true                //更新渲染时提供一个动画效果40         });41 42     //show方法43         Ext.Msg.show({44             title:‘我是自定义的提示框!!‘ , 45             msg:‘我是内容!!‘ , 46             width:300 , 47             height:300 ,48             buttons:Ext.Msg.YESNOCANCEL ,49             icon:Ext.Msg.WARNING        // ERROR INFO QUESTION  WARNING50         });51     52 });