jQuery MiniUI,快速开发WebUI界面

学习YUI.Ext 第三天:EXT:Menu组件

概述: 讲讲如何使用Ext菜单器件

这篇教程中,我们将学习使用Ext的菜单器件(Menu Widgets)。假设读者已经阅读过Ext简介一文,并懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成,使得创建一个菜单只需若干代码块(Block of code)。

开始!
第一步要做的是,下载本教程的示例文件。Zip文件包括三个文件:ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包这四个文件到Ext的安装目录中(例如,Ext是在“C:\code\Ext\v1.0”中,那应该在"v1.0"里面新建目录“menututorial”。双击ExtMenu.htm,接着你的浏览器打开启动页面,应该会有一条消息告诉你配置已完毕。如果是一个Javascrīpt错误,请按照页面上的指引操作。

在你常用的IDE中或文本编辑器中,打开ExtMenu.js看看:

Ext.onReady(function() {
 alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
 });
  在Ext的介绍中,我们讨论过使用Ext的原因和Ext.onReady()函数的功能。


创建简易的菜单

先看看怎么做一个基本的菜单,然后再讨论代码中的各个组件和知识点。加入下列代码到onReady函数中:


var menu = new Ext.menu.Menu({
    id: 'basicMenu',
    items: [{
            text: 'An item',
            handler: clickHandler
        },
        new Ext.menu.Item({
            text: 'Another item',
            handler: clickHandler
        }),
        '-',
        new Ext.menu.CheckItem({
            text: 'A check item',
            checkHandler: checkHandler
        }),
        new Ext.menu.CheckItem({
            text: 'Another check item',
            checkHandler: checkHandler
        })
    ]
});

var tb = new Ext.Toolbar('toolbar', [{
        text:'Our first Menu',
        menu: menu  // 分配menu到按钮
    }
]);

function clickHandler() {
    alert('Clicked on a menu item');
}

 function checkHandler() {
    alert('Checked a menu item');
}
 
OK 仔细看看这里的代码,首先实例化一个Menu类为变量“menu”。然后Menu的构建函数接受一串的Object Literal作为参数,在先前的Ext教程中我们已经讨对ObjectLiteral进行了解。当前的ObjectLiteral就包含了我们菜单中想要的属性。第一个属性是我们分配的ID,稍后我们可用ID来获取Menu的引用。
 


各种Item的类型
属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是将一个数组作为值(value)传到属性中去。数组里的数据就是我们想要在菜单中出现的每一项。每本例中我们放了六个菜单项,但何解每项的语法(Syntax)都不尽相同呢?第一项是一串Object Literal,包含一组我们可配置的name/value。Ext的底层库会为这串Object Literal按其配置默认地创建item对象。接着第二项是Item对象本身,后面跟着分隔符,最后两个是单选框项。整个过程演示了Ext Widget如何动态的运行。下例各项可填入到数组中:

{text: 'Foo'}                       // Ext 转换这个配置对象到menu item
'Straight Text'                     //文本或原始html (纯文字)
'-'                                 // 创建分隔符
new Ext.menu.Item({text: 'Foo'})    // 创建一个标准item (同{text: 'Foo'})
new Ext.menu.CheckItem()            // 创建单选框item
new Ext.menu.DateItem()             // 创建menu内置的日历控件
new Ext.menu.ColorItem()            //创建一个颜色采集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允许你加入任何元素
Item属性
Item接受什么类型的属性呢?本例中我们使用了这两属性:

text: 'An item',
handler: clickHandler
第一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函数(event handler function)。本例中我们将函数clickHandler()和checkHandler()定义在代码的最后。作为演示用途,这仅仅是用alert()通知你有一个单击的消息。
其它有用的属性是:

cls: 'a-class-name'  ,       // 为标准Item手动设置样式和图标ICON
icon: 'url',                 // 如不想用CSS,可直接设置图标的URL
group: 'name of group',      //只适用多选项,保证只有一项被选中
完整的item属性列表在Menu Item文档中。

在UI中摆放菜单
So,创建好的Menu对象已经有两个基本的item了,然而我们怎么把它们摆放到页面中呢?在UI中一个menu可以分配到多个位置(同一个对象,不同位置多次使用),这正是Ext如此强大的原因:每一个器件(widget)切成“一块一快”的类,来构建整个面向对象的动态结构(Structure)。这意味着menu可用于不同的场合。我们可将menu放到有按钮的toolbar中,或用页面中的一个按钮来展开menu,甚至可在Ext的其它器件中(widgets)使用menu作为上下文菜单(Context Menu)。

本例中分配一个menu到toolbar中:

var tb = new Ext.Toolbar('toolbar', [{
        text:'Our first Menu',
        menu: menu  // 分配menu到toolbar
    }
]);
Ext.Toolbar构建函数接受两个参数,第一个是指定toolbar的容器(contrainer);第二个参数是包含全部按钮的数组。这里,我们只使用一个按钮,正如所见,按钮实质上是一串由数组组成的Object Literal,同时这个Object Litetal亦包含了不同的属性。下面是一组按钮对象的Object Litetal属性:

cls: 'a-class-name'  ,      //手动设置样式和图标ICON
icon: 'url',                // 如不想用CSS,可直接设置图标的URL
text:'Our first Menu',      // 按钮提示之文字
menu: menu                  // 可以是menu之id或配置对象
Menu的分配方式:
刚才谈到如何分配Menu到工具条中(toolbar),继而亦讨论menu分配的不同方式,看看有关的细节是怎样的。So,因为menu属性可以以不同方式地分配,即是可以赋予一个menu对象,或是已经建好的menuID,或直接是一个menu config对象。你应该有机会就尝试一下以多种方式创建menu,因为类似的方式方法在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一样的效果,唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单击了。可以的话,把下面的代码也加入到onReady函数中,亲身体验一下:

var dateMenu = new Ext.menu.DateMenu({
    handler : function(datepicker, date){
        alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
    }
});

var colorMenu = new Ext.menu.Menu({
    id: 'colorMenu', // the menu's id we use later to assign as submenu
    items: [
        new Ext.menu.ColorItem({
            selectHandler: function(colorpicker, color){
                alert('Color Selected', 'You chose: ' + color);
            }
        })
    ]
});

var tb = new Ext.Toolbar('toolbar', [{
        text:'Our first Menu',
        menu: {
            id: 'basicMenu',
            items: [{
                    text: 'An item',
                    handler: clickHandler
                }, {
                    text: 'Another item',
                    handler: clickHandler
                },
                '-',
                new Ext.menu.CheckItem({
                    text: 'A check item',
                    checkHandler: checkHandler
                }),
                new Ext.menu.CheckItem({
                    text: 'Another check item',
                    checkHandler: checkHandler
                }),
                '-', {
                    text: 'DateMenu as submenu',
                    menu: dateMenu, // assign the dateMenu we created above by variable reference,
                    handler: date
                }, {
                    text: 'Submenu with ColorItem',
                    menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id
                }
            ]
        }
    }
]);

function clickHandler(item, e) {
    alert('Clicked on the menu item: ' + item.text);
}

function checkHandler(item, e) {
    alert('Checked the item: ' + item.text);
}
   
注意:留意几种不同的方法加入子菜单!还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。


练一练
Ok我们用上述的方法,创建了toolbar和menu,看起来应该是这样的:


上文提及menu可摆放在UI的任何位置,这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作,包括一些有用的方法和动态添加的功能。

MenuButton
new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});
动态添加菜单按钮到Toolbar
这条Toolbar有两个按钮。一个分隔符,和一个纯图标的按钮(附Quicktips)。你可尝试这样做,把zip文件中.gif加入

Ext.QuickTips.init();

tb.add('-', {
    icon: 'list-items.gif', //图标可单行显示
    cls: 'x-btn-icon',      // 纯图标
    tooltip: 'Quick Tips提示文字'
});
更方便的是
一些代码片段,有助你提高效率,留意注释!

// Menus更多的API内容
// 动态 增、减元素

menu.addSeparator(); //动态加入分隔符

var item = menu.add({
    text: 'Dynamically added Item'
});

// items 完整支持Observable API
item.on('click', onItemClick);

// items can easily be looked up
menu.add({
    text: 'Disabled Item',
    id: 'disableMe'  // <-- 设置ID便于查找lookup
    // disabled: true   <-- 先不disabled 而采用下面的方式
});

// 用 id 或 index访问
menu.items.get('disableMe').disable();

译者姓名:Frank
译者博客:http://www.ajaxjs.com/blog/