讲讲如何使用Ext菜单器�g

飛雪(leo) — Fri, 16 Mar 2007 08:40:00 GMT

讲讲如何使用Ext菜单器�g

�q�篇教程中，我们��学习��用Ext的菜单器�Ӟ��Menu Widgets)。假设读者已�l�阅读过Ext��介一文，�q�懂得一些Ext的基本相关知识。菜单器件是Ext库中较迟实现的器件。它由几个类联合构成�Q��得创��Z��个菜单只需若干代码块（Block of code�Q��?/p>

开始！

�W�一步要做的是，下蝲本教�E�的�C�Z��文�g。Zip文�g包括三个文�g�Q?strong>ExtMenu.html,�?strong>ExtMenu.js�?strong>ExtMenu.css�?/strong>�?strong>list-items.gif。解包这四个文�g到Ext的安装目录中�Q�例如，Ext是在“C:\code\Ext\v1.0”中�Q�那应该�?v1.0"里面新徏目录“menututorial”。双�?strong>ExtMenu.htm�Q�接着你的��览器打开启动��面�Q�应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误�Q�请按照��面上的指引操作�?/p>

在你常用的IDE中或文本�~�辑器中�Q�打开ExtMenu.js看看�Q?/p>

Ext.onReady(function() {
	alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!"); 
 });

在Ext的介�l�中�Q�我们讨��使用Ext的原因和Ext.onReady()函数的功能�?/p>

创徏��易的菜单

先看看怎么做一个基本的菜单�Q�然后再讨论代码中的各个�l��g和知识点。加入下列代码到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 仔细看看�q�里的代码，首先实例化一个Menu�c�Mؓ变量“menu”。然后Menu的构建函数接受一串的Object Literal作�ؓ参数�Q�在先前的Ext教程中我们已�l�讨对ObjectLiteral�q�行了解。当前的ObjectLiteral��包含了我们菜单中想要的属性。第一个属性是我们分配的ID�Q�稍后我们可以ID来获取Menu的引用�?

各种Item的类�?/h1>

属性“items”可能是最重要的属性当中的一个。留意一下语法其实我们是��一个数�l�作为��|��value)传到属性中厅R��数�l�里的数据就是我们想要在菜单中出现的每一��V��每本例中我们放了六个菜单项�Q�但何解每项的语法（Syntax�Q�都不尽相同呢？�W�一��Ҏ��一串Object Literal�Q�包含一�l�我们可配置的name/value。Ext的底层库会�ؓ�q�串Object Literal按其配置默认地创建item对象。接着�W�二��Ҏ��Item对象本��n�Q�后面跟着分隔�W�，最后两个是单选框��V��整个过�E�演�C�Z��Ext Widget如何动态的�q�行。下例各��可填入到数�l�中�Q?/p>

{text: 'Foo'}                       // Ext 转换�q�个配置对象到menu item
'Straight Text'                     //文本或原始html (�U�文�?
'-'                                 // 创徏分隔�W?
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')) //允许你加入�Q何元�?

Item属�?/h1>

Item接受什么类型的属性呢�Q�本例中我们使用了这两属性：

text: 'An item',
handler: clickHandler

�W�一个是Item的文本。第二个是当用户单击一单击Item所触发的事件处理函敎ͼ�event handler function�Q�。本例中我们��函数clickHandler()和checkHandler()定义在代码的最后。作为演�C�用途，�q�仅仅是用alert()通知你有一个单�ȝ��消息�?br />其它有用的属性是�Q?/p>

cls: 'a-class-name'  ,       // 为标准Item手动讄���样式和图标ICON
icon: 'url',                 // 如不想用CSS,可直接设�|�图标的URL
group: 'name of group',      //只适用多选项�Q�保证只有一��被选中

完整的item属性列表在Menu Item文档中�?/p>

在UI中摆放菜�?/h1>

So,创徏好的Menu对象已经有两个基本的item了，然而我们怎么把它们摆攑ֈ��面中呢?在UI中一个menu可以分配到多个位�|�（同一个对象，不同位置多次使用�Q�，�q�正是Ext如此强大的原因：每一个器�Ӟ��widget�Q�切成“一块一快”的�c�，来构建整个面向对象的动态结构（Structure�Q�。这意味着menu可用于不同的场合。我们可��menu攑ֈ�有按钮的toolbar中，或用��面中的一个按钮来展开menu�Q�甚臛_��在Ext的其它器件中�Q�widgets�Q��用menu作�ؓ上下文菜单（Context Menu�Q��?/p>

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

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

Ext.Toolbar构徏函数接受两个参数�Q�第一个是指定toolbar的容器（contrainer�Q�；�W�二个参数是包含全部按钮的数�l�。这�?我们只��用一个按�?正如所见，按钮实质上是一串由数组�l�成的Object Literal,同时�q�个Object Litetal亦包含了不同的属性。下面是一�l�按钮对象的Object Litetal属性：

cls: 'a-class-name'  ,      //手动讄���样式和图标ICON
icon: 'url',                // 如不想用CSS,可直接设�|�图标的URL
text:'Our first Menu',      // 按钮提示之文�?
menu: menu                  // 可以是menu之id或配�|�对�?

Menu的分配方式：

刚才谈到如何分配Menu到工��h��中（toolbar�Q�，�l�而亦讨论menu分配的不同方式，看看有关的细节是怎样的。So,因�ؓmenu属性可以以不同方式地分配，��x��可以赋予一个menu对象�Q�或是已�l�徏好的menuID�Q�或直接是一个menu config对象。你应该有机会就��试一下以多种方式创徏menu�Q�因为类似的方式�Ҏ��在Ext的Widgets随处可见。下面的代码演示了如何用不同的方法来做出跟范例一��L��效果�Q�唯一相同的就是menu对象的config。菜单中包括两个子菜单、一个DataItem容器、一个ColorItem容器。另外注意event handing函数需两个参数来获取事件更多的信息和知道哪个item被单��M��。可以的话，把下面的代码也加入到onReady函数中，亲��n体验一下：

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);
}

注意�Q?/strong>留意几种不同的方法加入子菜单�Q�还有even handing函数和Coloritem、DataMenu匿名函数之间的区别�?/p>

�l�一�l?/h1>
Ok我们用上�q�的�Ҏ��Q�创��Z��toolbar和menu�Q�看��h��应该是这��L��Q?/p>
上文提及menu可摆攑֜�UI的�Q何位�|�，�q�里��ؓ你演�C�menu如何与Toolbars、MeneuButtons、Context Menus's配合工作�Q�包括一些有用的�Ҏ��和动态添加的功能�?/p>MenuButton
new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});
动态添加菜单按钮到Toolbar
�q�条Toolbar有两个按钮。一个分隔符�Q�和一个纯图标的按钮（附Quicktips�Q�。你可尝试这样做�Q�把zip文�g�?gif加入
Ext.QuickTips.init(); tb.add('-', { icon: 'list-items.gif', //图标可单行显�C? cls: 'x-btn-icon', // �U�图�? tooltip: 'Quick Tips
提示文字' });
更方便的�?/h1>
一些代码片�D�，有助你提高效率，留意注释�Q?
// 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讉K�� menu.items.get('disableMe').disable();
下一步是
现在你已�l�了解菜单组件是如何工作了。下面的资源有助您进一步更深入学习菜单�Q?/p>

飛雪(leo) 2007-03-16 16:40 发表评论

色偷偷女男人的天堂亚洲网 ,亚洲午夜久久久久久久久久,亚洲AV蜜桃永久无码精品

讲讲如何使用Ext菜单器�g

开始！

创徏���易的菜单

Menu的分配方式：

动态添加菜单按钮到Toolbar

下一步是

创徏��易的菜单