工具栏和菜单

视频课：https://edu.csdn.net/course/play/7621

在桌面程序开发中很常用也很简单的工具栏和菜单，但是在通常的web开发中，要实现好工具栏和菜单并非易事，然而ExtJS使我们能够用类似桌面程序开发的方法来开发web的工具栏和菜单。

ExtJS中提供了Toolbar组件和Menu组件来实现相同的功能，使用这两个组件将给用户带来全新的用户体验。

 

 

核心技能部分

1.1 工具栏和菜单概述

在标准的桌面程序中都会提供工具栏和菜单栏，它们经常给用户提供一种快速执行操作的便捷方式，以方便用户使用。ExtJS中提供了Toolbar组件和Menu组件来实现相同的功能，使用这两个组件将给用户带来全新的用户体验。

 菜单的种类很多，如下拉菜单、分组菜单、右键菜单等，菜单上的内容可以是文本、单选框、按钮等。在ExtJS中实现这些菜单都非常简单。

1.2 工具栏

1.2.1 简单工具栏

Ext.Toolbar是工具栏的基础组件，它相当于容器，在其中可以放置各种工具栏元素，主要包括按钮、文字和菜单组件。

典型的工具栏是由一组按钮组成，比如Word办公软件的新建，打开、保存、插入、编辑等，下面就使用ExtJS实现这样的工具栏，代码如示例5.1所示。

示例5.1

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    // 为工具条添加4个按钮

    tb.add({

        text: '新建'

    },{

        text: '打开'

    },{

        text: '保存'

    },{

        text: '编辑'

    });

    tb.doLayout();

});

在示例5.1中，先创建一个工具栏，用工具栏的render()函数把它渲染到一个DIV上，然后调用工具栏的add()函数，向工具栏中添加4个按钮 

此时点击工具栏上的按钮不会有任何效果。如果想单击按钮后能执行操作，需要为这些按钮设置对应的事件处理函数，代码示例5.2所示。

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    // 为工具条添加4个按钮

    tb.add({

        text: '新建',

        handler:doClick

    },{

        text: '打开',

        handler:doClick

    },{

        text: '保存'

    },{

        text: '编辑'

    });

    tb.doLayout();

function doClick(btn){

Ext.Msg.alert("提示","你点击了 "+btn.text+" 按钮");

}

});

在示例5.2中，当点击工具栏中的按钮时触发doClick函数，按钮本身作为参数传递到处理函数中，通过btn.text取得按钮上的文本信息。

 

1.2.2 复杂工具栏

有时工具栏不仅只包括按钮组件，还会包含其它组件。要想实现包含多种元素的工具栏还是使用Toolbar对象的add()函数，这个函数提供了统一的添加调用方式，它可以将多个不同的元素一次性地添加到工具栏中，下面是一个完整的示例。

示例5.3

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    // 为工具条添加4个按钮

    tb.add({

        text: '新建',

        icon:'img/new.gif',//加入按钮图标

        handler:doClick

    },'-',{ //加入分隔符

        text: '打开',

        handler:doClick

    },'-',{

        text: '保存',

         icon:'img/save.gif',

    },'-',{

        text: '编辑'

    },'-',{

     xtype:'textfield',

     width:200

    },'-',{

     text:'搜索',

     icon:'img/2.png'

    });

    tb.doLayout();

function doClick(btn){

Ext.Msg.alert("提示","你点击了 "+btn.text+" 按钮");

}

});

我们在工具栏中加入按钮，分隔符，文本输入框等多种组件，这在很大程度上扩展了工具栏的功能。

1.2.3 启用和禁用工具栏

工具栏是大多数软件和用户交互的主要途径，对其功能限制必不可少，幸运的是Toolbar工具栏组件提供了enable和disable两个方法，它们可以启用和禁用工具栏的功能。下面示例5.4演示了工具栏的启用和禁用。

示例5.4

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    // 为工具条添加4个按钮

    tb.add({

        text: '新建',

        icon:'img/new.gif',

        handler:doClick

    },'-',{

        text: '打开',

        handler:doClick

    },'-',{

        text: '保存',

         icon:'img/save.gif',

    },'-',{

        text: '编辑'

    },'-',{

     xtype:'textfield',

     width:200

    },'-',{

     text:'搜索',

     icon:'img/2.png'

    });

    tb.doLayout();

function doClick(btn){

Ext.Msg.alert("提示","你点击了 "+btn.text+" 按钮");

}

Ext.get("enableBtn").on("click",function(){

tb.enable();

});

Ext.get("disableBtn").on("click",function(){

tb.disable();

});

});

示例5.4运行效果如图5.1.4所示。

 

图5.1.4 禁用工具栏

从图5.1.4中可以看出，当工具栏变成禁用状态时，里面的按钮和文字都变成灰色显示，并且不能点击，从而不能响应用户操作。

1.3 菜单

Ext.menu.Menu是菜单的基础组件，该组件相当于菜单项的容器，在菜单组件中不但可以放入Ext.menu.Item菜单项，也可以放入普通组件。

将菜单组件和工具栏组件结合起来，就可以创建出非常有实用价值的菜单栏。接下来从定义最简单的菜单开始，逐步构建一个功能丰富的菜单栏。

1.3.1 简单的菜单栏

一个文本编辑软件的菜单栏大家应该非常熟悉，主要有文件菜单和编辑菜单，在文件下拉菜单中有3个菜单项，分别是新建、打开和关闭；在编辑下拉菜单中也有3个菜单项，分别是复制、粘贴和剪切。下面就使用ExtJS实现这这样的菜单，代码如示例5.5所示。

示例5.5

Ext.onReady(function(){

   var toolbar = new Ext.Toolbar({//创建工具栏

renderTo:'toolbar',

width:300

});

var fileMenu = new Ext.menu.Menu({//文件创建菜单

allowOtherMenus : true,

items : [

new Ext.menu.Item({

text: '新建',//菜单项名称

menuHideDelay:1000,

handler:onMenuItem//菜单项处理函数

}),//添加菜单项

{text: '打开',handler:onMenuItem},

{text: '关闭',handler:onMenuItem}

]

});

var editMenu = new Ext.menu.Menu({//编辑创建菜单

allowOtherMenus : true,

items : [

{text: '复制',handler:onMenuItem},//添加菜单项

{text: '粘贴',handler:onMenuItem},

{text: '剪切',handler:onMenuItem}

]

});

toolbar.add(

{text : ' 文件 ', menu : fileMenu},//将菜单加入工具栏

{text : ' 编辑 ', menu : editMenu}

);

toolbar.doLayout();

function onMenuItem(item){//菜单项的回调方法

Ext.Msg.alert("提示",item.text);//取得菜单项的text属性

}

});

在示例5.5中，演示了将菜单加入到工具栏中构建菜单栏的方法，这里的关键点是对工具栏按钮配置对象中menu配置项的使用，它是连接菜单和工具栏的纽带。

1.3.2 多级菜单

简单菜单栏的创建非常简单方便，只要分别创建菜单和工具栏，然后将菜单加入工具栏就实现了二者的结合，形成了非常好的菜单效果。接下来学习多级菜单的实现，即使用Ext.menu.Item的menu配置项完成多级菜单的关联，如示例5.6所示。

示例5.6

Ext.onReady(function(){

   var toolbar = new Ext.Toolbar({//创建工具栏

renderTo:'toolbar',

width:400

});

   //二级菜单

   var secondMenu = new Ext.menu.Menu({

   allowOtherMenus : true,

items : [

{text:'文本文件',handler:onMenuItem},

{text:'HTML文件',handler:onMenuItem},

{text:'CSS文件',handler:onMenuItem}

]

   });

var fileMenu = new Ext.menu.Menu({//文件创建菜单

allowOtherMenus : true,

ignoreParentClicks:true,//忽略父菜单的单击事件

items : [

new Ext.menu.Item({

text: '新建',//菜单项名称

menuHideDelay:1000,

handler:onMenuItem,//菜单项处理函数

menu:secondMenu //配置二级菜单

}),//添加菜单项

{text: '打开',handler:onMenuItem},

{text: '关闭',handler:onMenuItem}

]

});

var editMenu = new Ext.menu.Menu({//编辑创建菜单

allowOtherMenus : true,

items : [

{text: '复制',handler:onMenuItem},//添加菜单项

{text: '粘贴',handler:onMenuItem},

{text: '剪切',handler:onMenuItem}

]

});

toolbar.add(

{text : ' 文件 ', menu : fileMenu},//将菜单加入工具栏

{text : ' 编辑 ', menu : editMenu}

);

toolbar.doLayout();

function onMenuItem(item){//菜单项的回调方法

Ext.Msg.alert("提示",item.text);//取得菜单项的text属性

}

});

在示例5.6中，给Ext.menu.Item的menu配置项指定了一个菜单，那么就可以组成二级菜单，多级菜单亦如此。示例5.6运行效果如图5.1.6所示。

 

图5.1.6 多级菜单

以上两节我们已经学习了简单菜单和多级菜单的创建方式，示例中的菜单项都是Ext.menu.Item对象，其表现形式中规中矩。下面将学习其它形式的菜单。

1.3.3 多选菜单和单选菜单

使用Ext.menu.CheckItem可以创建带选择框的菜单，示例5.7是一个多选菜单的示例。

示例5.7

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    var menuCheckbox = new Ext.menu.Menu({

        items: [

            new Ext.menu.CheckItem({//创建带选择框菜单

                text: '粗体',

                checked: true,

                checkHandler: function(item, checked) {//处理选择事件

                    Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '粗体');

                }

            }),

            new Ext.menu.CheckItem({

                text: '斜体',

                checkHandler: function(item, checked) {

                    Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '斜体');

                }

            })

        ]

    });

    tb.add({

        text: '字形',

        menu: menuCheckbox

    },{

        text: '字体'

    });

    tb.doLayout();

});

在上面代码中，使用Ext.menu.CheckItm创建带选择框的菜单，text参数表示菜单上显示的文字，checked参数表示当前菜单项是否被选中，checkHandler用来指定选择菜单时执行的处理函数，与普通菜单不同的是，它多了个checked参数，此参数标示当前菜单是否被选中。示例5.7运行效果如图5.1.7所示。

 

图5.1.7 多选菜单

下面我们来看看单选菜单如何实现。实际上单选菜单也是使用Ext.menu.CheckItem实现的，唯一不同的是group参数，下面代码是一个单选菜单的示例。

示例5.8

var menuRadio = new Ext.menu.Menu({

        items: [

            new Ext.menu.CheckItem({

                text: '宋体',

                group: 'font',

                checked: true,

                checkHandler: function(item, checked) {

                    Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '宋体');

                }

            }),

            new Ext.menu.CheckItem({

                text: '黑体',

                group: 'font',

                checkHandler: function(item, checked) {

                    Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '黑体');

                }

            }),

            new Ext.menu.CheckItem({

                text: '楷体',

                group: 'font',

                checkHandler: function(item, checked) {

                    Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '楷体');

                }

            })

        ]

    });

在上面代码中，我们使用group参数统一管理多个CheckItem，如果group的参数值相同那么这些菜单就成为一组单选菜单。示例5.8的运行效果如图5.1.8所示。

 

图5.1.8 单选菜单

1.3.4 日期菜单和颜色菜单

ExtJS为我们提供了日期选择菜单Ext.menu.DateMenu和Ext.menu.ColorMenu，它可以让我们直接把日期选择功能和颜色选择功能加入到菜单中。

示例5.9

Ext.onReady(function(){

     // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    tb.add({

        text: '日期',

        menu: new Ext.menu.DateMenu({

            handler : function(dp, date){

                Ext.Msg.alert('提示', '选择的日期是 ' + date.format('Y年m月d日'));

            }

        })

    }, {

        text: '颜色',

        menu: new Ext.menu.ColorMenu({

            handler : function(cm, color){

                if (typeof color == 'string') {

                    Ext.Msg.alert('提示', '选择的颜色是 ' + color);

                }

            }

        })

    });

    tb.doLayout();

});

在上面代码中，注意DateMenu的 handler处理函数，它有两个参数DatePicker和date，分别表示DateMenu中对应的DatePicker和用户选中的时间。示例5.9的运行效果如图5.1.9和5.1.10所示。

 

图5.1.9 日期菜单

 

图5.1.10 颜色菜单

1.3.5 向菜单中加入其它组件

Ext.menu.Menu中不仅可以包含基本的菜单组件，也可以将ExtJS中的其它组件放入。下面一个示例是把一个FormPanel放入到菜单中，代码如示例5.10所示。

示例5.10

Ext.onReady(function(){

    var form = new Ext.form.FormPanel({

        title: '输入表单',

        frame: true,

        defaultType: 'textfield',

        labelWidth: 50,

        width: 200,

        height: 100,

        items: [{

            fieldLabel: '名称',

            name: 'name'

        }],

        buttons: [{

            text: '确认'

        }, {

            text: '取消'

        }]

    });

    // 创建工具条

    var tb = new Ext.Toolbar();

    var menu = new Ext.menu.Menu({

        items: [form]

    });

    tb.add({

        text: '表单菜单',

        menu: menu

    });

    tb.render('toolbar');

    tb.doLayout();

});

在上面代码中，先创建一个FormPanel，然后直接将此FormPanel添加到菜单中，这样点击工具条上的按钮时，就会弹出对应的FormPanel，运行效果如图5.11所示。

 

图5.1.11 自定义表单菜单

1.3.6 右键菜单

在ExtJS中，可以为用户定义一个功能菜单，在用户单击鼠标右键时代替浏览器提供的系统功能菜单。这种自定义的右键菜单也是通过Ext.menu.Menu实现的。

示例5.11

Ext.onReady(function(){

  var menu1 = new Ext.menu.Menu({

        items: [

            {text: '新建一'},

            {text: '新建二'},

            {text: '新建三'}

        ]

    });

 

    var menu2 = new Ext.menu.Menu({

        items: [

            {text: '修改一'},

            {text: '修改二'},

            {text: '修改三'}

        ]

    });

 

    var menu3 = new Ext.menu.Menu({

        items: [

            {text: '删除一'},

            {text: '删除二'},

            {text: '删除三'}

        ]

    });

//创建菜单

    var contextmenu = new Ext.menu.Menu({

        items: [{

            text: '新建',

            menu: menu1

        },{

            text: '修改',

            menu: menu2

        },{

            text: '删除',

            menu: menu3

        }]

    });

//添加事件监听，在浏览器中单击鼠标右键时，弹出上面定义好的菜单

    Ext.get(document).on('contextmenu', function(e) {

        e.preventDefault();

        contextmenu.showAt(e.getXY());

    });

});

上面代码中，先创建好各个菜单，而这些菜单并没有添加到Ext.Toolbar中，而是组合到一个contextmenu菜单中，此时在页面中看不到这些菜单。接下来为页面添加监听事件，获得document对象，监听它的contextmenu事件，在这个事件处理函数中，首先取消浏览器的默认操作，然后调用contextmenu的showAt()函数，在鼠标当前位置显示我们定义好的菜单。示例5.11运行效果如图5.12所示。

 

 

 

本章总结

Ø ExtJS中提供了Toolbar组件和Menu组件来实现相同的功能，使用这两个组件将给用户带来全新的用户体验。

Ø Ext.Toolbar是工具栏的基础组件，它相当于容器，在其中可以放置各种工具栏元素，主要包括按钮、文字和菜单组件。

Ø Toolbar工具栏组件提供了enable和disable两个方法，它们可以启用和禁用工具栏的功能。

Ø Ext.menu.Menu是菜单的基础组件，该组件相当于菜单项的容器，在菜单组件中不但可以放入Ext.menu.Item菜单项，也可以放入普通组件。

Ø Ext.menu.Item的menu配置项完成多级菜单的关联。

Ø 使用Ext.menu.CheckItem可以创建带选择框的菜单。

Ø ExtJS为我们提供了日期选择菜单Ext.menu.DateMenu和Ext.menu.ColorMenu，它可以让我们直接把日期选择功能和颜色选择功能加入到菜单中。

 

 

 

 

 

 

 

 

 

 

任务实训部分

1：实现只包含菜单按钮的简单工具栏

训练技能点

Ø 实现简单工具条

需求说明

实现一个只包含菜单按钮的工具栏 

实现步骤

(1) 使用Ext.Toolbar创建工具栏容器

(2) 使用Ext.Toolbar对象的add方法向工具栏容器中加入菜单按钮，并设置按钮图标和分隔符

参考代码如下所示：

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

    // 为工具条添加4个按钮

    tb.add({

        text: '新建',

        icon:'img/new.gif',

        handler:doClick

    },'-',{

        text: '打开',

        icon:'img/open.gif',

        handler:doClick

    },'-',{

        text: '保存',

        icon:'img/save.gif'

    },'-',{

        text: '编辑',

        icon:'img/edit.png'

    });

    tb.doLayout();

function doClick(btn){

Ext.Msg.alert("提示","你点击了 "+btn.text+" 按钮");

}

});

2：实现包含其它组件的复杂工具栏

训练技能点

Ø 实现复杂工具栏

需求说明

实现一个除包含菜单按钮外还包含文本输入框的复杂工具栏，效果如图5.2.2所示。

 

图5.2.2 包含文本框的工具栏

实现步骤

(1) 使用Ext.Toolbar创建工具栏容器

(2) 使用Ext.Toolbar对象的add方法向工具栏容器中加入菜单按钮，并设置按钮图标和分隔符。

(3) 在加入到工具栏中的组件中，使用xtype设置类型为textfield，并使用不同的分隔符让它右对齐。

参考代码如下所示。

Ext.onReady(function(){

    // 创建工具条

    var tb = new Ext.Toolbar();

    tb.render('toolbar');

 

    tb.add({

        text: '新建',

        icon:'img/new.gif',

        handler:doClick

    },'-',{

        text: '打开',

        icon:'img/open.gif',

        handler:doClick

    },'-',{

        text: '保存',

        icon:'img/save.gif'

    },'-',{

        text: '编辑',

        icon:'img/edit.png'

    },'->',{//设置成右对齐

     xtype:'textfield',//设置为文本框类型

     width:150

    },'-',{

     text:'搜索',

     icon:'img/62.png'

    });

    tb.doLayout();

function doClick(btn){

Ext.Msg.alert("提示","你点击了 "+btn.text+" 按钮");

}

});

 

3：向Grid中加入工具栏

训练技能点

Ø 给Grid添加工具栏

需求说明

在GridPanel中加入顶部工具栏，运行效果如图5.2.3所示。

 

图5.2.3 GridPanel中加入顶部工具栏

实现步骤

(1) 实现页面整体布局。

(2) 创建GridPanel并使用tbar属性设置顶部工具栏。

核心参考代码如下所示：

var grid = new Ext.grid.GridPanel({

id:'usergrid',

title:'操作用户',

store:store,

cm:cm,

sm:sm,

tbar:[{//设置顶部工具栏

        text: '添加',

        icon:'img/new.gif',

        handler:doClick

    },'-',{

        text: '编辑',

        icon:'img/edit.png'

    },'-',{

     text: '删除',

        icon:'img/delete.png'

    },'->',{//设置成右对齐

     xtype:'textfield',//设置为文本框类型

     width:150

    },'-',{

     text:'搜索',

     icon:'img/62.png'

    }],

viewConfig:{forceFit:true}

}) ;

4：实现多级菜单

训练技能点

Ø 实现多级菜单

需求说明

实现一个多级菜单，效果如图5.2.4所示。

 

图5.2.4 多级菜单

实现步骤

(1) 使用Ext.menu.Menu创建菜单

(2) 使用Ext.menu.Menu对象的menu属性添加二级菜单

参考代码如下所示。

Ext.onReady(function() {

var toolbar = new Ext.Toolbar( {//创建工具栏

renderTo : 'toolbar',

width : 400

});

//二级菜单

var secondMenu = new Ext.menu.Menu( {

allowOtherMenus : true,

items : [ {

text : '文本文件',

icon:'img/textfile.png',

handler : onMenuItem

}, {

text : 'HTML文件',

handler : onMenuItem

}, {

text : 'CSS文件',

handler : onMenuItem

} ]

});

var fileMenu = new Ext.menu.Menu( {

allowOtherMenus : true,

ignoreParentClicks : true,//忽略父菜单的单击事件

items : [ new Ext.menu.Item( {

text : '新建',//菜单项名称

menuHideDelay : 1000,

icon:'img/new.gif',

handler : onMenuItem,//菜单项处理函数

menu : secondMenu

}), {

text : '打开',

icon:'img/open.gif',

handler : onMenuItem

}, {

text : '关闭',

icon:'img/close.gif',

handler : onMenuItem

} ]

});

 

toolbar.add( {

text : ' 文件 ',

icon:'img/folder.png',

menu : fileMenu

}, {

text : ' 编辑 '

});

toolbar.doLayout();

function onMenuItem(item) {//菜单项的回调方法

Ext.Msg.alert("提示", item.text);//取得菜单项的text属性

}

});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

巩固练习

一、选择题

1. 使用Ext.Toolbar的（ ）函数可以向工具栏中加入按钮。

A. add()

B. insert

C. addMenu

D. insertMenu

2. 使用（ ）属性可以给工具栏按钮加入图标。

A. img

B. icon

C. image

D. icons

3. 使用（ ）函数可以禁用工具栏。

A. able

B. enable

C. disable

D. disabled

4. 使用Ext.Toobar对象的（ ）属性可以加入菜单栏。

A. items

B. menus

C. menu

D. itemMenu

5. 使用（ ）对象可以实现颜色选择菜单。

A. Ext.menu.ColorMenu

B. Ext.menu.DateMenu

C. Ext.menu.Item

D. Ext.menu.Menu

文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。

原文链接：aaaedu.blog.csdn.net/article/details/65447389