Ext.MessageBox-打造自己的对话框

  好吧.又一次激起了大家的视觉疲劳--又是Ext。

  因为去年工作需要自己接触到了Ext 感觉还是挺不错的,虽然有点慢。最近又是因为有工作的需求,自己得以系统的学习了一下Ext的所有内容,感觉还是获益匪浅的~

  Ext.MessageBox是一个工具类,它继承自Object对象,用处是生成各种风格的信息对话框,MessageBox有如下几项特点:

 1. Ext.Msg是Ext.MessageBox的别名,这个我非常郁闷, 一开始看到这两个兄弟不像兄弟的名字纳闷了很多,本来以为是不一样的东西,但是不一样的东西怎么有相同的效果,经过查找才发现...原来他们是一样的,真搞不懂要来个别名干什么。

 2. Ext.MessageBox所有对话框时异步的,它与普通的alert()函数并不一样,alert()函数是会阻止页面的运行,而Ext.MessageBox则不会,因为他本质原来和alert()是完全不一样的,MessageBox它就是一个DIV而已。

 3. Ext.MessageBox风格是可以通过Config可配置的,这个确实没啥好说的。

 

 下面我们来试验一个Ext.Message.alert

 

 代码如下所示:

 

<script type="text/javascript">
    Ext.onReady(function(){
      Ext.MessageBox.alert('你好','这是ext.message.alert');
      })
</script>

 

 部署-运行-就是下面这个样子了

 

 

Ext.MessageBox.alert的调用格式是这样的: alert(String title,String msg,[Function fn],[Object scope])

上面的代码只使用了title与msg两个参数,也是必备参数([]为可选参数,fn表示回调函数 scope表示作用域),下面让我们加上fn

<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('你好','这是ext.message.alert',hello);
})
 function hello(id){alert('您单击了:'+id);}
</script>

让我们单击OK,hello()函数也就被调用了:

 

这里要注意的是extJs的alert是异步执行不会产生阻塞,所以我们需要将用户确认后才执行的代码放入回调函数fn中,才能避免一些不必要的错误。

 

如何打造我们个性化的对话框呢,这就要使用Ext.MessageBox.show()了,

Ext.MessageBox.show的调用格式为show(Object config), 通过不同的config来创造出不同风格的对话框。

 

下面我们来创造出一个三个按钮的对话框:

 <script type="text/javascript">
    Ext.onReady(function(){
       Ext.MessageBox.show({
          title: '个性对话框',
          msg:'我有三个按钮,和一个多行文本区',
          modal: true,
          prompt:true,
          value:'请输入',
          buttons:Ext.Msg.YESNOCANCEL,
          icon:Ext.Msg.QUESTION
       })
      })
</script>

 

显示为

 

而关于Config的配置,在API中做了详细的说明

 

如果有什么疑问,大家可以自己去看API,里面解释的非常详细。Ext.MessageBox提供了很多丰富的对象框的工具类,完全可以满足日常开发的需要。