ExtJS2.0開發與實踐筆記[1]——ExtJS中的Dialog與Form

科技小能手發表於2017-11-15
JS筆記ORM
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文件。



本文轉自 cping 51CTO部落格，原文連結:http://blog.51cto.com/cping1982/129953


相關文章