ExtJS2.0中提供了一整套的web表示层UI解决方案，令我们可以非常轻易的实现平时较为复杂的javascript操作，在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。
ExtJS2.0的配置及运行方式请参阅 ExtJS2.0开发与实践笔记[0]-初识ExtJS
DialogExt.js (此中包含了ExtJS的确定，分支选择，进度条，输入框等四个应用实例)
/**
* 
*/var DialogExt=function(){ 
/**
* 追踪输出 * @param {Object} str
*/ var trace=function(str){ //在ExtJS2.0中，log由Ext统一调度 Ext.log(str); }; //设置Ext.Button别名为Button var Button=Ext.Button; //设置Ext.MessageBox别名为MessageBox var MessageBox=Ext.MessageBox; //变量设置，用于保存DialogExt自身及当中键钮 var root; var btn0; var btn1; var btn2; var btn3; //返回操作 return { //初始化函数 init:function(){ //设定root等于this root=this; //生成Ext按钮，绑定数据到Element，renderTo为绑定的按钮名，text为输出内容 btn0=new Button({renderTo:'a',text:'确定选项'}); btn1=new Button({renderTo:'b',text:'yes/no选项'}); btn2=new Button({renderTo:'c',text:'输入框选项'}); btn3=new Button({renderTo:'d',text:'进度条选项'}); //确定选项 btn0.on('click',function() { MessageBox.alert( '消息框', 'Ext很简单。', root.onResult); }); //yes/no选项 btn1.on('click',function(evt) { MessageBox.confirm( '提问', 'Ext是否很容易掌握？', root.onResult); }); //输入框选项 btn2.on('click',function(evt) { MessageBox.prompt( '输入框', '输入内容：', root.onResult); }); //进度条选项 btn3.on('click',function() { //生成进度条，分别设定了标题，信息，宽，是否自动前进进度，是否自动关闭进度5项 MessageBox.show({ title :'进度条', msg :'初始化中…', width :240, progress:true, closable:false }); //进度条定时处理 var f=function(v) { return function(){ if (v<=10) { MessageBox.updateProgress( v/10,'读取进度 '+v+'/10'); } else { //隐藏Ext消息框 MessageBox.hide(); } }; }; //进度条时间设定 for (var i=1;i<=11;i++) { setTimeout(f(i),i*1000); } }); }, //当前操作对象输出 onResult:function(button,text){ trace("点击按钮:"+button+" 输出文本:"+text); } };}();
//设定onReady,Ext将在dom加载完毕后自动调用其中操作Ext.onReady(DialogExt.init,DialogExt,true);Dialog.html
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DialogExt</title> <!--加载ExtJs资源[当调用Ext.log调试时，需要使用debug方式的js]--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <!--加载我的js文件--> <script type="text/javascript" src="DialogExt.js"></script></head><body> <!--设置Element，以供DialogExt.js调用--> <table cellspacing="5"> <tr> <td><div id="a"></div></td> <td><div id="b"></div></td> <td><div id="c"></div></td> <td><div id="d"></div></td> </tr> </table></body></html>效果图如下：
form应用实例，在此我演示了Ext中简单的Form生成方式。
FormExt.js
FormExt=function(){ var trace=function(str){ Ext.log(str); }; //1.1版为Ext.form.Form var Form=Ext.form.FormPanel; var MessageBox=Ext.MessageBox; var TextField=Ext.form.TextField; //变量设置 var root; var form; var textField0; var textField1; var textField2; var textField3; return { //初始化FormExt init:function(){ root=this; //生成窗体 form=new Form({ //样式 baseCls: 'x-plain', //label宽 labelWidth: 75, //数据提交地址 url:'save.jspa' }); //生成TextField textField0=new TextField({ fieldLabel:'姓名', name :'name', width :175, allowBlank:false }); textField1=new TextField({ fieldLabel:'地址', name :'address', width :175 }); textField2=new TextField({ fieldLabel:'年齢', name :'age', width :175 }); textField3=new TextField({ fieldLabel:'email', name :'email', //验证类型为email vtype :'email', width :175 }); //将TextField加载入form form.add(textField0,textField1,textField2,textField3); //生成按钮 form.addButton('保存',function(){ MessageBox.alert('消息框','保存数据')}); form.addButton('取消',function(){ MessageBox.alert('消息框','取消操作')}); //将form内容实施到名称为frmExt的div上 form.render('frmExt'); } }; }();//设定onReady,Ext将在dom加载完毕后自动调用其中操作Ext.onReady(FormExt.init,FormExt,true);FormExt.html
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FormExt</title> <!--ExtJS资源引入--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <!--我的js文件--> <script type="text/javascript" src="FormExt.js"></script></head><body> <!--frame--> <div style="width:300px;"> <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div> <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"> <h3 style="margin-bottom:5px;">Ext的form</h3> <div id="frmExt"></div> </div></div></div> <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div> </div></body></html>
ExtJS自2.0开始UI库已经有了极大的丰富，基本可满足我们日常开发所需的一切效果，而在Java操作中我们习以为常的很多功能，都能够在Ext找到对应的操作。在下回我将着重介绍Ext中Layout的使用。
PS:由于ExtJS类库较多，所以将于较后进行介绍，目前仅以实例为主，现阶段请参阅ExtJS2.0的doc文档。
