學習ExtJS4 常用控件

ExtJS組件配置方式介紹

　　1.使用逗號分隔參數列表配置組件
 　  　　首先來看一個簡單的逗號分隔參數列表的例子。這個例子非常簡單，它用來顯示信息提示框。

　　2.使用Json對象配置組件
 　　　　接下來看一個使用Json對象配置組件的例子，很多地方習慣性稱之為配置對象。　　

    <script>
        Ext.onReady(function () {
            //使用逗號配置
            Ext.Msg.alert('提示', '逗號分隔參數列表');
            //使用Json對象配置
            var config = {
                title: '使用Json對象配置',
                msg:'這里是提示信息！'
            };
            Ext.Msg.show(config);
        });
    </script>

　　ExtKS開放了大量配置項以滿足程序員在實際項目中的不同需求，熟悉各個配置項的配置方式以及效果是我們快速掌握EXTJS的一個捷徑。

信息提示框組件介紹 

　　 Ext.window.MessageBox是一個工具類，用來生成各種風格的信息提示框。其實例對象可以通過Ext.MessageBox或Ext.Msg來訪問，兩者具有相同的效果，后者提供更簡便的調用方式。
 　　Ext.MessageBox提供的信息對話框顯示的文本不僅支持純文本顯示還支持HTML格式文本，采用HTML格式文本進行排版，效果更加豐富多彩。
 　　Javascript中標准的alert會阻塞瀏覽器腳本的執行，但是Ext.MessageBox不會，它是異步調用。
 　　1.Ext.MessageBox.alert是一個只讀信息提示框，可以為其提供一個回調函數，該函數將在單擊按鈕后被調用（不包括右上角的退出按鈕），所單擊按鈕的ID將作為唯一的參數傳遞到回調函數中。

    <script>
        Ext.onReady(function () {
            Ext.Msg.alert('提示',"<b>提示信息</b>");
        });
    </script>

 　　2.Ext.MessageBox.confirm確認對話框，支持傳入回調函數，與Ext.MessageBox.alert一致。

    <script>
        Ext.onReady(function () {
            Ext.Msg.confirm('提示', '你確定要這樣做嗎',callback);
            function callback(id) {
                alert("你點擊了:"+id);
            }
        });
    </script>

 　　3.Ext.MessageBox.prompt顯示用戶輸入信息的對話框。支持傳入回調函數，所單擊的按鈕id以及文本框的內容將作為參數傳遞到回調函數中。

    <script>
        Ext.onReady(function () {
            //true表示多行文本輸入框
            Ext.Msg.prompt("提示", "請輸入信息",callback,true,'默認值');
            function callback(id, msg) {
                alert("點擊按鈕:"+id+" 輸入信息:"+msg);
            }
        });
    </script>

　　 4.Ext.MessageBox.wait()顯示一個自動滾動的進度框。它被用在一個耗時的交互操作中，它不能定義一個時間間隔自動關閉，需要手動關閉。

    <script>
        Ext.onReady(function () {
            Ext.Msg.wait("請等待", "溫馨提示", {
                text:'進度條上的文字'
            });
        });
    </script>

 　　5.Ext.MessageBox.show()基於配置顯示新的信息提示框或重置一個已經存在的信息提示框。前面介紹的3個方法內部調用的都是它，盡管調用簡捷，但是它不支持所有的配置項，要建立更加強大、個性化的提示框還需要掌握Ext.MessageBox.show方法做起。配置項太多，礙於篇幅，不列出，需要的人去查閱ExtJSAPI。該提示框是異步執行的，使用時請注意。

<script>
        Ext.onReady(function () {
            function callback(id, msg) {
                alert("點擊的按鈕:"+id+" 信息:"+msg);
            }
            Ext.Msg.show({
                title: '溫馨提示',
                msg: '三個按鈕和一個文本區',
                modal: true,//模態
                prompt: true,//含輸入框
                value: '請輸入',//輸入框默認值
                fn: callback,//回調函數
                buttons: Ext.Msg.YESNOCANCEL,//可用按鈕
                icon:Ext.Msg.QUESTION
            });
        });
    </script>

 

　　6.Ext.MessageBox其他功能
 　　(1) 改變默認的按鈕文字

    <script>
        Ext.onReady(function () {
            //ok
            Ext.Msg.msgButtons[0].setText('按鈕一');
            //yes
            Ext.Msg.msgButtons[1].setText('按鈕二');
            //no
            Ext.Msg.msgButtons[2].setText('按鈕三');
            //cancel
            Ext.Msg.msgButtons[3].setText('按鈕四');
            
            Ext.Msg.show({
                title: '提示',
                msg: '防火防盜防校長',
                modal: true,
                buttons:Ext.Msg.YESNOCANCEL
            });
        });
    </script>

 　　(2) 動態更新信息提示框

    <script>
        Ext.onReady(function () {
            var msgBox = Ext.MessageBox.show({
                title: '提示',
                msg: '動態更新的信息文字',
                modal: true,
                buttons: Ext.Msg.OK,
                fn: function () {//回調函數
                    //停止定時任務
                    Ext.TaskManager.stop(task);
                }
            });
            //Ext.TaskManager是一個功能類，用來執行定時程序
            var count = 1;
            var task = {
                run: function () {
                    msgBox.updateText("正在上傳第" + count + "條數據...");
                    count++;
                },
                interval:1000
            };
            Ext.TaskManager.start(task);
        });
    </script>

 　　(3) 更新進度以及提示信息

 <script>
        Ext.onReady(function () {
            var msgBox = Ext.Msg.show({
                title: '顯示',
                msg: '信息',
                modal: true,
                width: 300,
                progress: true //使用進度條
            });
            var count = 0;//滾動條刷新的次數
            var percentage = 0;//進度百分比
            var progressText = '';//進度條信息
            var task = {
                run: function () {
                    count++;
                    //計算進度
                    percentage = count / 10;
                    //生成進度條上的文字
                    progressText = '當前完成度:' + percentage * 100 + '%';
                    //更新信息提示對話框
                    msgBox.updateProgress(percentage, progressText, '當前時間:' + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));
                    //刷新10次關閉信息提示對話框
                    if (count > 10) {
                        Ext.TaskManager.stop(task);
                        msgBox.hide();
                    }
                },
                interval:1000
            };
            Ext.TaskManager.start(task);
        });
    </script>

 

進度條組件介紹

 　　Ext.ProgressBar是一個可更新的進度條組件，該進度條具有手工模式和自動模式。手工模式下，需要自己控制進度條的顯示，自動模式下，只要調用wait方法，進度條就會無限制的滾動下去，它適合為那么耗時長的同步操作進行提示。

    <script>
        Ext.onReady(function () {
            var ProgressBar = new Ext.ProgressBar({
                title: '進度條',
                width: 300,
                text:'請等待...',
                //使用htmlbody作為渲染容器
                //renderTo:Ext.getBody()
                renderTo: 'div'
            });
        });
    </script>

 　　手工模式的進度條是通過調用進度條的updateProgress()方法來實現的。手工更新的進度條非常適合可以掌握程序的執行狀態的長時間操作。例如文件的上傳進度，如果有些操作無法實時獲取進度，只能采用自動更新的進度條信息。

 <script>
        Ext.onReady(function () {
            var progressbar = new Ext.ProgressBar({
                width: 300,
                renderTo:'div'
            });
            var count = 0;//滾動條更新次數
            var percentage = 0;//進度條百分比
            var progressText = '';//進度條信息
            Ext.TaskManager.start({
                run: function () {
                    count++;
                    if (count >= 10)
                        progressbar.hide();
                    //計算進度
                    percentage = count / 10;
                    progressText = percentage * 100 + '%';
                    //更新信息 參數含義:百分比,進度條文字,是否使用動畫效果
                    progressbar.updateProgress(percentage,progressText,true);
                },
                interval: 1000,//方法執行時間間隔
                repeat:6 //設置執行次數
            });
        });
    </script>

 　　創建一個自動模式的進度條並不復雜，只用調用進度條的wait方法，進行必要的配置即可得到一個理想狀態的自動更新的進度條了。

  <script>
        Ext.onReady(function () {
            var ProgressBar = new Ext.ProgressBar({
                text: '正在處理，請稍后...',
                width: 300,
                renderTo: 'ProgressBar'
            });
            ProgressBar.wait({
                duration: 10000,//進度條持續更新10秒
                interval: 1000,//每1秒更新一次
                increment: 10,//進度條分10次更新完畢
                text: 'waiting',//進度條上的文字
                scope: this,//回調函數的執行fanw
                fn: function () {
                    Ext.Msg.alert('提示', '更新完畢');
                }
            });
        });
    </script>

 

　　通過cls配置改變進度條的樣式。

    <style type="text/css">
        .custom .x-progress-inner
        {
            height: 17px;
            background: #fff;
        }

        .custom .x-progress-bar
        {
            height: 15px;
            background: transparent url(images/custom-bar-red.gif) repeat-x 0 0;
            border-top: 1px solid #BEBEBE;
            border-bottom: 1px solid #EFEFEF;
            border-right: 0;
        }
    </style>
    <script>
        Ext.onReady(function () {
            var ProgressBar = new Ext.ProgressBar({
                width: 300,//設定進度條的寬度
                renderTo: 'ProgressBar',
                cls: 'custom'//使用自定義樣式
            });
            ProgressBar.wait({
                duration: 10000,//進度條持續更新10秒鍾
                interval: 1000,//每1秒鍾更新一次
                increment: 10//進度條分10次更新完畢
            });
        });
    </script>

 

實現工具和菜單欄

　　Ext.toolbar.Toolbar是工具欄的基礎組件，它相當於容器，在其中可以放置各種工具欄元素，主要包括按鈕、文字和菜單組件。

 <script>
        Ext.onReady(function () {
            var toolbar = new Ext.toolbar.Toolbar({
                renderTo: 'toolbar',
                width: 300
            });
            toolbar.add([
                {
                    text: '新建',//按鈕上的文字
                    handler: function () {
                        alert('新建');
                    },
                },
                {
                    text: '打開',
                    handler: function () {
                        alert('打開');
                    }
                },
                {
                    text: '保存',
                    handler: function () {
                        alert('');
                    }
                }
            ]);
        });
    </script>

    <script>
        Ext.onReady(function () {
            var toolbar = new Ext.toolbar.Toolbar({
                renderTo: 'toolbar',
                width:500
            });
            toolbar.add(
                {
                    text:'新建'
                },
                {
                    text:'打開'
                },
                {
                    text:'保存'
                },
                {
                    text:'編輯'
                },
                '-',
                {
                    //加入表單元素
                    xtype: 'textfield',
                    hideLabel: true,
                    width:150
                },
                '->',//加入一個充滿工具欄的空白元素
                '<a href=#>鏈接</a>',//加載一個HtmlElement
                {xtype:'tbspacer',width:50},//加入一個空白元素
                '靜態文本'//加入一個簡單字符串
                );
            Ext.get('btnEnable').on('click', function () {
                //啟用工具欄
                toolbar.enable();
            });
            Ext.get('btnDisable').on('click', function () {
                //啟用工具欄
                toolbar.disable();
            });
        });
    </script>

Ext.menu.Menu菜單

　　作為我們編寫的第一個菜單欄，它以熟悉的文本編輯軟件菜單欄為原型，主要分為文件菜單和編輯菜單，在文件下拉菜單中有3個菜單選項，分別是新建、打開、關閉，在編輯下拉菜單中包含復制、粘帖、剪切。

    <script>
        Ext.onReady(function () {
            function onMenuItem(item) {
                alert(item.text);
            }
            var toolbar = new Ext.toolbar.Toolbar({
                renderTo: 'toolbar',
                width: 300
            });
            var fileMenu = new Ext.menu.Menu({
                shadow: 'frame',//設置菜單四條邊都有陰影
                allowOtherMenus: true,
                items: [
                    new Ext.menu.Item({
                        text: '新建',
                        handler: onMenuItem
                    }),//添加菜單項
                    { text: '打開', handler: onMenuItem },
                    { text: '關閉', handler: onMenuItem }
                ]
            });
            var editorMenu = new Ext.menu.Menu({
                shadow: 'drop',//設置菜單在右下有陰影
                allowOtherMenus: true,
                items: [
                     { text: '復制', handler: onMenuItem },
                     { text: '粘帖', handler: onMenuItem },
                     { text: '剪切', handler: onMenuItem }
                ]
            });
            toolbar.add(
                {
                    text: '文件',
                    menu:fileMenu
                },
                {
                    text: '編輯',
                    menu:editorMenu
                }
                );
        });
    </script>

 

　　接下來看多級菜單的實現方式，在以下示例中是通過Ext.menu.Item的menu配置項來完成多級菜單的關聯。

 <script>
        Ext.onReady(function () {
            function handleItem(item) {
                alert(item.text);
            }
            var Toolbar = new Ext.toolbar.Toolbar({
                renderTo: 'toolbar',
                width: 300
            });
            var infoMenu = new Ext.menu.Menu({
                ignoreParentClicks: true, //忽略父菜單的點擊事件
                plain: true,
                items: [
                    {
                        text: '個人信息',
                        menu: new Ext.menu.Menu({
                            ignoreParentClicks: true,
                            items: [
                                {
                                    text: '基本信息',
                                    menu: new Ext.menu.Menu(
                                        {
                                            items: [
                                                {
                                                    text: '身高',
                                                    handler: handleItem
                                                },
                                                {
                                                    text: '體重',
                                                    handler: handleItem
                                                }
                                            ]
                                        }
                                        )
                                }
                            ]
                        })
                    },
                    {
                        text: '公司信息'
                    }
                ]
            });
            Toolbar.add(
                {
                    text: '設置',
                    menu: infoMenu
                }
                );
        });
    </script>

 　　將更多組件加入菜單。再以上2個示例中介紹了簡單菜單和多級菜單的創建，示例中菜單項都是Ext.menu.Menu對象，其表現形式中規中矩，下面演示一下向菜單欄
中添加豐富的組件。

    <style type="text/css">
        .userManagerIcon
        {
            background-image: url(images/userManager.gif) !important;
        }

        .newIcon
        {
            background-image: url(images/new.gif) !important;
        }

        .openIcon
        {
            background-image: url(images/open.gif) !important;
        }

        .saveIcon
        {
            background-image: url(images/save.gif) !important;
        }
    </style>
    <script>
        Ext.onReady(function () {

            var Toolbar = new Ext.toolbar.Toolbar({//創建工具欄
                renderTo: 'toolbar',
                width: 300
            });

            var fileMenu = new Ext.menu.Menu({//文件創建菜單
                items: [{
                    xtype: 'textfield',//創建表單字段
                    hideLabel: true,
                    width: 100
                }, {
                    text: "顏色選擇",
                    menu: new Ext.menu.ColorPicker()
                },
                    { xtype: 'datepicker' },//添加日期選擇器組件
                    {
                        xtype: 'buttongroup',//添加按鈕組組件
                        columns: 3,
                        title: '按鈕組',
                        items: [{
                            text: '用戶管理',
                            scale: 'large',
                            colspan: 3,
                            width: 170,
                            iconCls: 'userManagerIcon',
                            iconAlign: 'top'
                        }, {
                            text: '新建', iconCls: 'newIcon'
                        }, {
                            text: '打開', iconCls: 'openIcon'
                        }, {
                            text: '保存', iconCls: 'saveIcon'
                        }]
                    }
                ]
            });

            Toolbar.add(
                { text: '文件', menu: fileMenu }//將菜單加入工具欄
            );
        });
    </script>

文中示例代碼下載　　

　　示例代碼