Ext 与 Jquery 的结合应用

废话：

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

 

说明：

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

 

正题：

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

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

Js代码 复制代码
  1. <style>   
  2.     @import  "../resources/css/ext-all.css";          
  3. </style>   
  4. <script src="../adapter/jquery/jquery.js"></script>   
  5. <script src="../adapter/jquery/ext-jquery-adapter.js"></script>   
  6. <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方法

Js代码 复制代码
  1. <body>   
  2. <button id="generalBtn">普通对话框</button><br/>   
  3.  $("#generalBtn").click(function(){   
  4.                 Ext.Msg.alert("title", "hello word",function(btn){alert(btn)});   
  5.  });   
  6. </body>  

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

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

Java代码 复制代码
  1.  <button id="confirmBtn">确认对话框</button><br/>   
  2.  <button id="promptBtn">输入对话框</button><br/>   
  3. $("#confirmBtn").click(function(){   
  4.                 Ext.MessageBox.confirm("title", "hello word",function(btn){   
  5.                     alert(btn);   
  6.                 });        
  7. });   
  8. $("#promptBtn").click(function(){   
  9.                 Ext.MessageBox.prompt("title", "输入内容", function(btn,text){alert("用户按下的按钮是:"+btn+"用户输入的内容是"+text)},null, true, 'value');              
  10. });  

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

Js代码 复制代码
  1. <button id="progressBtn">progressBtn</button><br/>   
  2. <button id="waitBtn">wait</button><br/>   
  3. function time (i, messageBox){   
  4.             messageBox.updateProgress(i,"progressText", "进程");   
  5.             if(i>=1){   
  6.                 messageBox.hide();   
  7.                 return;   
  8.             }else{   
  9.               setTimeout(time, 500, i+0.1,messageBox);     
  10.             }   
  11.         }   
  12. $("#progressBtn").click(function(){   
  13.                  var pro = Ext.MessageBox.progress("title", "进程", "progressText");   
  14.                  time(0.1,pro);   
  15.             });   
  16.             $("#waitBtn").click(function(){   
  17.                 Ext.MessageBox.wait("等待中...", "title");   
  18.             });  

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

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

调用方法如下

Js代码 复制代码
  1. <BUTTON ID="showBtn">自定义对话框</BUTTON>   
  2.       <button id="testRBtn" style="float:right">右边的按钮</button>   
  3. $("#showBtn").click(function(){   
  4.                 Ext.MessageBox.show({   
  5.                     animEl:"testRBtn",   
  6.                     buttons:Ext.MessageBox.YESNOCANCEL,   
  7.                     title:"自定义对话框",   
  8.                //     fn:callback,   
  9.                     icon:Ext.MessageBox.WARNING,   
  10.                     msg:"o(∩_∩)o...哈哈"  
  11.                 });   
  12.             });  
posted @ 2010-05-03 12:09  貔貅  阅读(730)  评论(0)  编辑  收藏  举报