廢話：
??? ??? 我一直主張各司其職，頁面的UI就應該由專門的人去做（flash，css等）而不應該交給js來完成，不過最近在周圍朋友的影響下對ext也充滿了好奇，畢竟ext的UI表現還是很優美的（本人是個大老粗對審美就這點品味了），于是開始決定學習ext并將其記錄下來，希望對他人有用。
?
說明：
??? ?? 本人是jquery的的fans，好在ext與jquery并不沖突，在寫演示代碼時我將主要使用jquery+ext
?
正題：
??? ?? 今天剛開始學習ext于是從最簡單的對話框開始。
??? ?? 首先搭建好ext環境（HTML中引入對應的js文件）
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>?? <style>@import "../resources/css/
-all.css"; </style><script src="../
/
/
.js"></script><script src="../
/
/
-
-
.js"></script><script src="../
-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代碼
<body> ??<button?id="generalBtn">普通對話框</button><br/> ???$("#generalBtn").click(function(){ ??????????????????Ext.Msg.alert("title",?"hello?word",function(btn){alert(btn)}); ???}); ??</body>??<body>
<button id="generalBtn">普通對話框</button><br/>$("#generalBtn").click(function(){
.Msg.alert("title", "hello word",function(btn){alert(btn)});});
</body>
?alert共有4個參數前2個是必填的，第三個是回調函數當對話框關閉時將調用該函數，第四個參數是回調函數的作用域（這個參數具體什么用我目前不清楚，有清楚的朋友還望指點一二）。
Msg還包括了一些常用的對話框比如confirm,prompt基本用法與alert相同
Java代碼
?<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');??????????? ??});?? <button id="confirmBtn">確認對話框</button><br/><button id="promptBtn">輸入對話框</button><br/>
$("#confirmBtn").click(function(){
.MessageBox.confirm("title", "hello word",function(btn){alert(btn);});
});
$("#promptBtn").click(function(){
.MessageBox.prompt("title", "輸入內容", function(btn,text){alert("用戶按下的按鈕是:"+btn+"用戶輸入的內容是"+text)},null, true, 'value');
});
?Msg還包括progress與wait對話框，用法也比較簡單
Js代碼
<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"); ??????????????});??<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 =
.MessageBox.progress("title", "進程", "progressText");time(0.1,pro);});$("#waitBtn").click(function(){
.MessageBox.wait("等待中...", "title");});
?Msg中其實最核心的show方法，他可以根據配置對象定義一個自定義的對話框，其實剛才所見的所有對話框都是ext幫我們事先定義好的而已，其內部都是調用show方法
show方法很簡單只有一個參數就是配置對象，但這個對象的屬性很多，具體內容可以參考API
調用方法如下
Js代碼
<BUTTON?ID="showBtn">自定義對話框</BUTTON> ????????<button?id="testRBtn"?style="float:right">右邊的按鈕</button> ??$("#showBtn").click(function(){ ??????????????????Ext.MessageBox.show({ ??????????????????????animEl:"testRBtn", ??????????????????????buttons:Ext.MessageBox.YESNOCANCEL, ??????????????????????title:"自定義對話框", ???????????????????????????????????????icon:Ext.MessageBox.WARNING, ??????????????????????msg:"o(∩_∩)o...哈哈"??????????????????}); ??????????????});??<BUTTON ID="showBtn">自定義對話框</BUTTON><button id="testRBtn" style="float:right">右邊的按鈕</button>
$("#showBtn").click(function(){
.MessageBox.show({animEl:"testRBtn",buttons:
.MessageBox.YESNOCANCEL,title:"自定義對話框",// fn:callback,icon:
.MessageBox.WARNING,msg:"o(∩_∩)o...哈哈"});});?最后把項目的一個頁面實例貼附到這里供大家參考:
代碼?1?
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="BackStateManage.aspx.cs"?Inherits="zsWeb.admin.BackStateManage"?%>
?2?
?3?
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?4?
?5?
<html?xmlns="http://www.w3.org/1999/xhtml"?>
?6?
<head?runat="server">
?7?
????<title></title>
?8?
????
?9?
????<!--?jquery?references?context?-->
10?
????<link?href="../CSS/cupertino/jquery-ui-1.8.custom.css"?rel="stylesheet"?type="text/css"?/>
11?
????<script?src="../JS/jquery-1.4.1-vsdoc.js"?type="text/javascript"></script>
12?
????<script?src="../JS/jquery-ui-1.8.custom.min.js"?type="text/javascript"></script>
13?
????<script?src="../JS/jquery-ui-1.8.custom.min-vsdoc.js"?type="text/javascript"></script>
14?
????
15?
????<!--?Ext?js?references?context?-->
16?
????<link?href="../Plusins/resources/css/ext-all.css"?rel="stylesheet"?type="text/css"?/>
17?
????<script?src="../Plusins/ExtJS/ext-jquery-adapter.js"?type="text/javascript"></script>
18?
????<script?src="../Plusins/ExtJS/ext-all.js"?type="text/javascript"></script>
19?
20?
</head>
21?
<body>
22?
????<form?id="form1"?runat="server">
23?
????<div>
24?
<input?type="button"?id="showBtn"?value="showBtn"?/>
25?
<input?type="button"?id="waitBtn"?value="waitBtn"?/>
26?
27?
????<script?type="text/javascript"?language="javascript">
28?
????????$("#showBtn").click(function()?{
29?
????????????Ext.MessageBox.show({
30?
????????????????animEl:?"testRBtn",
31?
????????????????buttons:?Ext.MessageBox.YESNOCANCEL,
32?
????????????????title:?"自定義對話框",
33?
????????????????//?????fn:callback,???
34?
????????????????icon:?Ext.MessageBox.WARNING,
35?
????????????????msg:?"o(∩_∩)o...哈哈"
36?
????????????});
37?
????????});?
38?
????</script>
39?
????</div>
40?
????</form>
41?
</body>
42?
</html>
43?
?
轉載于:https://www.cnblogs.com/China-Dragon/archive/2010/05/03/1726305.html
總結
以上是生活随笔為你收集整理的Ext 与 Jquery 的结合应用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
