廢話：
??? ??? 我一直主張各司其職，頁(yè)面的UI就應(yīng)該由專門的人去做（flash，css等）而不應(yīng)該交給js來(lái)完成，不過(guò)最近在周圍朋友的影響下對(duì)ext也充滿了好奇，畢竟ext的UI表現(xiàn)還是很優(yōu)美的（本人是個(gè)大老粗對(duì)審美就這點(diǎn)品味了），于是開始決定學(xué)習(xí)ext并將其記錄下來(lái)，希望對(duì)他人有用。
?
說(shuō)明：
??? ?? 本人是jquery的的fans，好在ext與jquery并不沖突，在寫演示代碼時(shí)我將主要使用jquery+ext
?
正題：
??? ?? 今天剛開始學(xué)習(xí)ext于是從最簡(jiǎn)單的對(duì)話框開始。
??? ?? 首先搭建好ext環(huán)境（HTML中引入對(duì)應(yīng)的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的樣式，如果沒(méi)有這個(gè)文件那ext的界面會(huì)奇丑無(wú)比。
由于我喜歡用jquery于是我導(dǎo)入了jquery.js與ext-jquery-adapter.js文件
這里可以根據(jù)個(gè)人喜歡進(jìn)行修改在ext的adapter文件夾下有prototype，yui，ext，jquery四種可以選擇。
ext-all.js是ext主要功能的合集
搭建好環(huán)境后就可以開始寫代碼啦。
在ext中所有對(duì)話框都有Ext.MessageBox進(jìn)行管理，可以縮寫成Ext.Msg。
一個(gè)簡(jiǎn)單的alert我們可以調(diào)用Msg中的alert方法
Js代碼
<body> ??<button?id="generalBtn">普通對(duì)話框</button><br/> ???$("#generalBtn").click(function(){ ??????????????????Ext.Msg.alert("title",?"hello?word",function(btn){alert(btn)}); ???}); ??</body>??<body>
<button id="generalBtn">普通對(duì)話框</button><br/>$("#generalBtn").click(function(){
.Msg.alert("title", "hello word",function(btn){alert(btn)});});
</body>
?alert共有4個(gè)參數(shù)前2個(gè)是必填的，第三個(gè)是回調(diào)函數(shù)當(dāng)對(duì)話框關(guān)閉時(shí)將調(diào)用該函數(shù)，第四個(gè)參數(shù)是回調(diào)函數(shù)的作用域（這個(gè)參數(shù)具體什么用我目前不清楚，有清楚的朋友還望指點(diǎn)一二）。
Msg還包括了一些常用的對(duì)話框比如confirm,prompt基本用法與alert相同
Java代碼
?<button?id="confirmBtn">確認(rèn)對(duì)話框</button><br/> ???<button?id="promptBtn">輸入對(duì)話框</button><br/> ??$("#confirmBtn").click(function(){ ??????????????????Ext.MessageBox.confirm("title",?"hello?word",function(btn){ ??????????????????????alert(btn); ??????????????????});????? ??}); ??$("#promptBtn").click(function(){ ??????????????????Ext.MessageBox.prompt("title",?"輸入內(nèi)容",?function(btn,text){alert("用戶按下的按鈕是:"+btn+"用戶輸入的內(nèi)容是"+text)},null,?true,?'value');??????????? ??});?? <button id="confirmBtn">確認(rèn)對(duì)話框</button><br/><button id="promptBtn">輸入對(duì)話框</button><br/>
$("#confirmBtn").click(function(){
.MessageBox.confirm("title", "hello word",function(btn){alert(btn);});
});
$("#promptBtn").click(function(){
.MessageBox.prompt("title", "輸入內(nèi)容", function(btn,text){alert("用戶按下的按鈕是:"+btn+"用戶輸入的內(nèi)容是"+text)},null, true, 'value');
});
?Msg還包括progress與wait對(duì)話框，用法也比較簡(jiǎn)單
Js代碼
<button?id="progressBtn">progressBtn</button><br/> ??<button?id="waitBtn">wait</button><br/> ??function?time?(i,?messageBox){ ??????????????messageBox.updateProgress(i,"progressText",?"進(jìn)程"); ??????????????if(i>=1){ ??????????????????messageBox.hide(); ??????????????????return; ??????????????}else{ ????????????????setTimeout(time,?500,?i+0.1,messageBox);?? ??????????????} ??????????} ??$("#progressBtn").click(function(){ ???????????????????var?pro?=?Ext.MessageBox.progress("title",?"進(jìn)程",?"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", "進(jìn)程");if(i>=1){messageBox.hide();return;}else{setTimeout(time, 500, i+0.1,messageBox); }}
$("#progressBtn").click(function(){var pro =
.MessageBox.progress("title", "進(jìn)程", "progressText");time(0.1,pro);});$("#waitBtn").click(function(){
.MessageBox.wait("等待中...", "title");});
?Msg中其實(shí)最核心的show方法，他可以根據(jù)配置對(duì)象定義一個(gè)自定義的對(duì)話框，其實(shí)剛才所見(jiàn)的所有對(duì)話框都是ext幫我們事先定義好的而已，其內(nèi)部都是調(diào)用show方法
show方法很簡(jiǎn)單只有一個(gè)參數(shù)就是配置對(duì)象，但這個(gè)對(duì)象的屬性很多，具體內(nèi)容可以參考API
調(diào)用方法如下
Js代碼
<BUTTON?ID="showBtn">自定義對(duì)話框</BUTTON> ????????<button?id="testRBtn"?style="float:right">右邊的按鈕</button> ??$("#showBtn").click(function(){ ??????????????????Ext.MessageBox.show({ ??????????????????????animEl:"testRBtn", ??????????????????????buttons:Ext.MessageBox.YESNOCANCEL, ??????????????????????title:"自定義對(duì)話框", ???????????????????????????????????????icon:Ext.MessageBox.WARNING, ??????????????????????msg:"o(∩_∩)o...哈哈"??????????????????}); ??????????????});??<BUTTON ID="showBtn">自定義對(duì)話框</BUTTON><button id="testRBtn" style="float:right">右邊的按鈕</button>
$("#showBtn").click(function(){
.MessageBox.show({animEl:"testRBtn",buttons:
.MessageBox.YESNOCANCEL,title:"自定義對(duì)話框",// fn:callback,icon:
.MessageBox.WARNING,msg:"o(∩_∩)o...哈哈"});});?最后把項(xiàng)目的一個(gè)頁(yè)面實(shí)例貼附到這里供大家參考:
代碼?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:?"自定義對(duì)話框",
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?
?
轉(zhuǎn)載于:https://www.cnblogs.com/China-Dragon/archive/2010/05/03/1726305.html
總結(jié)
以上是生活随笔為你收集整理的Ext 与 Jquery 的结合应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
