ExtJS与jQuery结合实践-优快云博客

废话：

我一直主张各司其职，页面的UI就应该由专门的人去做（flash，css等）而不应该交给js来完成，不过最近在周围朋友的影响下对ext也充满了好奇，毕竟ext的UI表现还是很优美的（本人是个大老粗对审美就这点品味了），于是开始决定学习ext并将其记录下来，希望对他人有用。

说明：

本人是jquery的的fans，好在ext与jquery并不冲突，在写演示代码时我将主要使用jquery+ext

正题：

今天刚开始学习ext于是从最简单的对话框开始。

首先搭建好ext环境（HTML中引入对应的js文件）

    <style>
        @import  "../resources/css/ext-all.css";       
    </style>
    <script src="../adapter/jquery/jquery.js"></script>
    <script src="../adapter/jquery/ext-jquery-adapter.js"></script>
    <script src="../ext-all.js"></script>

其中css为ext的样式，如果没有这个文件那ext的界面会奇丑无比。

由于我喜欢用jquery于是我导入了jquery.js与ext-jquery-adapter.js文件

这里可以根据个人喜欢进行修改在ext的adapter文件夹下有prototype，yui，ext，jquery四种可以选择。

ext-all.js是ext主要功能的合集

搭建好环境后就可以开始写代码啦。

在ext中所有对话框都有Ext.MessageBox进行管理，可以缩写成Ext.Msg。

一个简单的alert我们可以调用Msg中的alert方法

<body>
<button id="generalBtn">普通对话框</button><br/>
 $("#generalBtn").click(function(){
                Ext.Msg.alert("title", "hello word",function(btn){alert(btn)});
 });
</body>

alert共有4个参数前2个是必填的，第三个是回调函数当对话框关闭时将调用该函数，第四个参数是回调函数的作用域（这个参数具体什么用我目前不清楚，有清楚的朋友还望指点一二）。

Msg还包括了一些常用的对话框比如confirm,prompt基本用法与alert相同

 <button id="confirmBtn">确认对话框</button><br/>
 <button id="promptBtn">输入对话框</button><br/>
$("#confirmBtn").click(function(){
                Ext.MessageBox.confirm("title", "hello word",function(btn){
                    alert(btn);
                });     
});
$("#promptBtn").click(function(){
                Ext.MessageBox.prompt("title", "输入内容", function(btn,text){alert("用户按下的按钮是:"+btn+"用户输入的内容是"+text)},null, true, 'value');           
});

Msg还包括progress与wait对话框，用法也比较简单

<button id="progressBtn">progressBtn</button><br/>
<button id="waitBtn">wait</button><br/>
function time (i, messageBox){
            messageBox.updateProgress(i,"progressText", "进程");
            if(i>=1){
                messageBox.hide();
                return;
            }else{
              setTimeout(time, 500, i+0.1,messageBox);  
            }
        }
$("#progressBtn").click(function(){
                 var pro = Ext.MessageBox.progress("title", "进程", "progressText");
                 time(0.1,pro);
            });
            $("#waitBtn").click(function(){
                Ext.MessageBox.wait("等待中...", "title");
            });

Msg中其实最核心的show方法，他可以根据配置对象定义一个自定义的对话框，其实刚才所见的所有对话框都是ext帮我们事先定义好的而已，其内部都是调用show方法

show方法很简单只有一个参数就是配置对象，但这个对象的属性很多，具体内容可以参考API

调用方法如下

<BUTTON ID="showBtn">自定义对话框</BUTTON>
      <button id="testRBtn" style="float:right">右边的按钮</button>
$("#showBtn").click(function(){
                Ext.MessageBox.show({
                    animEl:"testRBtn",
                    buttons:Ext.MessageBox.YESNOCANCEL,
                    title:"自定义对话框",
               //     fn:callback,
                    icon:Ext.MessageBox.WARNING,
                    msg:"o(∩_∩)o...哈哈"
                });
            });