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:codeExtv1.0”中，那应该在"v1.0"里面新建目录“menututorial”。双击ExtMenu.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误，请按照页面上的指引操作。

在你常用的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
声明：本站教程文章版权为一起Ext(http://www.17ext.com/)所有，转载请注明出处

Ext教程-一起Ext

搜索

Tags: