ExtJS2.0开发与实践笔记[3]——Ext中的Menu

  1. 云栖社区>
  2. 博客>
  3. 正文

ExtJS2.0开发与实践笔记[3]——Ext中的Menu

科技小能手 2017-11-07 16:14:00 浏览554
展开阅读全文
在桌面程序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(
01)) * 16+ hexTodec(now.substr(11)),
                G: (hexTodec(now.substr(
21)) * 16+ hexTodec(now.substr(31)),
                B: (hexTodec(now.substr(
41)) * 16+ hexTodec(now.substr(51))
            }

        }
,
        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


网友评论

登录后评论
0/500
评论
科技小能手
+ 关注