ExtJS2 0开发与实践笔记 1 ——ExtJS中的Dialog与Form

               
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文档。