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

cys_web

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 (v10) ...{

                         MessageBox.updateProgress(

                            v/10,'读取进度 '+v+'/10');


                        } else ...{

                         //隐藏Ext消息框

                         MessageBox.hide();

                        }

                    };

                };

                //进度条时间设定


                for (var i=1;i11;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>DialogExttitle>

    加载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>FormExttitle>

    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的formh3>

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

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/26845/showart_508757.html