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

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

                在桌面程式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: http://www.apache.org/licenses/LICENSE-2.0</p>
 * @author chenpeng
 * @email：[email protected]
 * @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 >


執行效果圖如下：
           

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow