ExtJS的使用方法集锦(6)——工具栏和菜

ExtJS的使用方法汇总(6)——工具栏和菜
本文来自CSDN博客，转载自：http://blog.csdn.net/rocket5725/archive/2009/09/15/4555207.aspx

   菜单的种类很多，包括下拉菜单、分组菜单、右键菜单等等，右键菜单与Window桌面上单击右键弹出的菜单效果一样，只是样式不同，菜单上的内容包括文字、单选框、按钮等。对于EXT来说，这些菜单的实现都非常简单。

我们可以在一个面板的顶端或底端放置一横排功能按钮，按下不同的按钮时会执行不同的操作。我们把这个横条称为工具条，放在工具条上的按钮称为菜单。本章将详细介绍EXT中工具栏和菜单的使用方法。

一、简单菜单
创建一个简单工具条的方法如下，注意的一点是HTML代码必须要有：<div id="toolbar"></div>

过程大致包括：先创建一个工具条，用工具条的render()函数把它渲染在DIV上，然后调用Toolbar的add函数，向Toolbar添加4个按钮，同时还可以添加单击处理事件。

  
二、向菜单中添加分隔线
分隔线显示就是一条水平线，可以使用它将菜单中不同类型的菜单项分隔显示，Ext中向菜单中添加分隔线的方式有两种。

1、使用连字符或'separator'作为参数，如下面的代码所示：
tb.add({                   text:'颜色',                   menu:new Ext.menu.ColorMenu({                       handler:function(cm,color){                           if(typeof color=='string'){                               Ext.Msg.alert('选择颜色','选择的颜色是'+color);                           }                       }                                   })                });  

五、小结
本章主要介绍如何创建工具条和菜单，以及如何使用下拉菜单和分级菜单对我们需要的功能按钮进行分组显示，除此之外，还关于高级菜单进行了分析。至于分页控件Ext.PagingToolbar的使用方法在后面的章节会给出介绍。