Ext 与 Jquery 的结合应用

废话：

我一直主张各司其职，页面的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:"自定义对话框",
// fn:callback,
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     
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     
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 的结合应用相关推荐

Ext 整合 Jquery
如果想要整合jQuery需要用到Ext的jQuery驱动,jquery的plugin和jQuery的Library 本身,今天正好遇到这个整合的问题,于是google了一下,得到了如上的解决方案,我用 ...
Ext.widgets-menu
Ext.menu.Menu 菜单对象 config{ allowOtherMenus : Boolean //允许同时显示其它的菜单? defaultAlign : String ...
ext核心API详解
http://hi.baidu.com/j2me/profile 1 EXT核心API详解(一)-Ext 1 EXT核心API详解(二)-Array/Date/Function/Number/Stri ...
罕见的jquery旋转式图片切换
查看效果下载地址罕见的eogallery-1.0 旋转式图片切换,并且下侧的说明也随着一起切换,整体效果非常棒,希望大家喜欢. 前台部分代码代码 <!DOCTYPE html PUBLIC ...
html模块开发模板引擎,一个前端html模板处理引擎(javascript)
http://www.cnblogs.com/jcli/p/javascript_template_pure.html 做后台开发(java/python)的同学开发web应用,对于前端页面生成技术并 ...
一个前端html模板处理引擎(javascript) - pure
做后台开发(java/python)的同学开发web应用,对于前端页面生成技术并不陌生,像jsp,freemark等.开发UGC类型的互联网站,因为要SEO友好,所以一般都会在后台用模板引擎直接生成好 ...
extjs 关于dom操作的几个库
经过几天的学习研究,发现ext与jquery的设计思路完全是来自两个方向. jquery是内聚,把所有东西都放在$的下面,而ext是采用分模块的设计思路,每个功能封装一个库.这样就形成了各自的实用风格 ...
浏览器内存泄漏问题的跟踪与解决(转)
在Ajax盛行以前,浏览器内存泄漏不是什么大问题,因为都是通过页面跳转和刷新来进行与服务端的交互,而现在情况不一样了,很多应用广泛应用Ajax和iframe,结果内存泄漏成了很多富客户端应用的隐患.比 ...
网页加速插件Decentraleyes使用介绍
文章背景作为开发者开发过程中会遇到一些报错,一般我们会去stackoverflow上去搜索解决方案,但是该网站打开速度超级慢,原因是该网站引用了一些google js资源,google 在中国大陆是 ...

Ext 与 Jquery 的结合应用

Ext 与 Jquery 的结合应用相关推荐

最新文章

热门文章