ExtJS2.0開發與實踐筆記[3]——Ext中的Menu

weixin_34319999發表於2017-11-07
JS筆記
在桌面程式gui開發中,menu是我們所經常使用的元件之一，它為使用者提供了便利的程式功能選擇項；而在web開發中，如何製作menu選單效果一直是 個很棘手的問題，如何讓選單通用，如何令選單響應事件都需要我們自己動手來完成。所幸Ext也為我們提供了Menu元件，以Ext進行開發時，我們的不必 要工作量將大大的減少。

Ext 的Menu元件，是通過幾個類的聯合來使用的，這些類包括：Ext.Toolbar、Ext.menu.Menu、Ext.menu.Item、 Ext.menu.CheckItem，以及一些特殊型別的選單或選單項，例如選單Ext.menu.DateMenu、選單項 Ext.menu.ColorItem。  

其中組織關係如下圖：


Ext.Toolbar：
該類表示一個選單條，構建函式接受兩個引數，第一個是指定toolbar的容器（contrainer）；第二個引數是包含全部按鈕的陣列。

Ext.menu.Menu：
該類表示一個選單，包含選單標識id和選單中所含的選單項。 

Ext.menu.Item：
該類表示一個選單項，選單項包括一些屬性，如上面的text和handler，根據不同選單項型別，屬性的使用略有不同，最基本的包括文字內容text和事件處理器函式handler/ checkHandler，具體請參考Ext 的API文件。 

Ext.menu.CheckItem： 
可選選單項，從Ext.menu.Item繼承而來，表示可選的選單項。 

Ext.menu.DateMenu： 
特定的表示時間的選單，從Ext.menu.Menu繼承而來 。

Ext.menu.ColorItem：
特定的表示顏色選擇的選單項集合，可直接作為Menu建構函式中的items屬性值。 

下面我給出一個簡單的用例程式碼：(Ext2.0配置方法見此)

MenuExt.js
/**
 * <p>Title: LoonFramework</p>
 * <p>Description:Ext的Menu用例</p>
 * <p>Copyright: Copyright (c) 2008</p>
 * <p>Company: LoonFramework</p>
 * <p>License: [url]http://www.apache.org/licenses/LICENSE-2.0</p>[/url]
 * @author chenpeng
 * @email：[email]ceponline@yahoo.com.cn[/email]
 * @version 0.1
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    //選單選項
    var dateMenu = new Ext.menu.DateMenu({
        handler: function(dp, date){
            Ext.MessageBox.alert('日期選擇', '選擇日期為: ' + date.format('Y/m/d'), '');
        }
    });
    
    var colorMenu = new Ext.menu.ColorMenu({
        id: 'colorMenu',
        handler: function(cm, color){
             var rgb=Ext.color.hexToRGB(color);
             Ext.MessageBox.alert('顏色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B, '');
        }
    });
    
    function onItemCheck(item, checked){
        Ext.MessageBox.alert('選擇', '當前點選[' + item.text + '],狀態為 ' + (checked ? 'checked' : 'unchecked'), '');
    }
    
    var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [{
            text: '選項1',
            //預設為選中
            checked: true,
            //選中處理方式為onItemCheck      
            checkHandler: onItemCheck
        }, {
            text: '選項2',
            checked: true,
            checkHandler: onItemCheck
        }, {
            text: '選項3!',
            checked: true,
            checkHandler: onItemCheck
        }, //分隔選單
 '-', {
            text: '單選選單',
            menu: {
                items: [{
                    text: 'A',
                    checked: false,
                    group: 'theme',
                    checkHandler: onItemCheck
                }, {
                    text: 'B',
                    checked: true,
                    group: 'theme',
                    checkHandler: onItemCheck
                }, {
                    text: 'C',
                    checked: false,
                    group: 'theme',
                    checkHandler: onItemCheck
                }, {
                    text: 'D',
                    checked: false,
                    group: 'theme',
                    checkHandler: onItemCheck
                }]
            }
        }, {
            text: '日期選擇',
            iconCls: 'calendar',
            menu: dateMenu
        }, {
            text: '顏色選擇',
            menu: colorMenu
        }]
    });
    //建立工具欄 
    var tb = new Ext.Toolbar();
    //繫結到toolbar元素
    tb.render('toolbar');
    //新增選單
    tb.add({
        text: 'Ext選單測試',
        iconCls: 'bmenu',
        //注入選單
        menu: menu
    });
    
    
    
    
});
// 自定義函式，用於從color event中提取所選數值
Ext.color = function(){
    var result = '';
    var bool = true;
    var formatValue = function(obj){
        if (bool) {
            var obj = Array.prototype.slice.call(arguments, 0);
            result = String.format('{0}', obj);
        }
        bool = !bool;
        return result;
    }
    var hexTodec = function(hexchar){
        return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());
    }
    return {
        value: function(obj){
            return formatValue(obj);
        },
        hexToRGB: function(color){
            color = formatValue(color);
            var now = color.replace("#", "");
            return {
                R: (hexTodec(now.substr(0, 1)) * 16) + hexTodec(now.substr(1, 1)),
                G: (hexTodec(now.substr(2, 1)) * 16) + hexTodec(now.substr(3, 1)),
                B: (hexTodec(now.substr(4, 1)) * 16) + hexTodec(now.substr(5, 1))
            }
        },
        init: function(){
        }
    };
}
();
Ext.onReady(Ext.color.init, Ext.color);


MenuExt.html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>MenuExt</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.js">
        </script>
        <!--我的js-->
        <script type="text/javascript" src="MenuExt.js">
        </script>
    </head>
    <body>
     <div id="toolbar"></div>
    </body>
    </body>
</html>


執行效果圖如下：


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


相關文章