废话:
我一直主张各司其职,页面的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>
<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方法
- <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相同
- <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对话框,用法也比较简单
- <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
调用方法如下
- <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...哈哈" }); });
最后把项目的一个页面实例贴附到这里供大家参考:
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