分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

               
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資源引入<