ExtJs菜单工具栏综合实例

Vezn

于 2016-12-19 22:57:15 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： ext

本文链接：https://blog.youkuaiyun.com/Vezn_King/article/details/53750215

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建复杂工具栏及菜单的示例，展示了如何通过ExtJS实现文件操作、编辑选项、信息管理和主题切换等功能。通过具体代码实现了包括颜色选择器、日期选择器和按钮组在内的多个组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="Ext4.2/resources/css/ext-all.css" rel="stylesheet" />
    <script src="Ext4.2/bootstrap.js"></script>
    <script>
        Ext.onReady(function () {
            var toolbar = new Ext.toolbar.Toolbar({ renderTo: 'toolbar', width: 300 });
            var filemenu = new Ext.menu.Menu({
                shadow: 'frame',
                allowOtherMenus: true,
                items: [
                    new Ext.menu.Item({
                        text: '新建',
                        handler: onMenuItem
                    }),
                    {
                        text: '打开',
                        handler: onMenuItem
                    },
                    {
                        text: '关闭',
                        handler: onMenuItem
                    },
                    {
                        text: '颜色选择',
                        menu: new Ext.menu.ColorPicker()
                    },
                    {
                        xtype: 'datepicker'
                    },
                    {
                        xtype: 'buttongroup',
                        columns: 3,
                        title: '按钮组',
                        items: [
                            {
                                text: '用户管理',
                                scale: 'large',
                                colspan: 3,
                                width: 170

                            },
                            {
                                text: '撤销'
                            },
                             {
                                 text: '重做'
                             },
                              {
                                  text: '返回'
                              }
                        ]
                    }
                ]
            });

            var infomenu = new Ext.menu.Menu({
                ignoreParentClicks: true,//忽略父级菜单的菜单点击事件
                plain: true,
                items: [
                    {
                        text: '个人信息',
                        menu: new Ext.menu.Menu({
                            ignoreParentClicks: true,//忽略父级菜单的菜单点击事件

                            items: [{
                                text: "基本信息",
                                menu: new Ext.menu.Menu({
                                    items: [{
                                        text: "身高"
                                    },
                                    {
                                        text: "体重"
                                    }]
                                })

                            }]
                        })

                    }, {
                        text: "公司信息"
                    }

                ]
            })

            var editmenu = new Ext.menu.Menu({
                shadow: 'drop',
                allowOtherMenus: true,
                items: [
                    { text: "复制" },
                    { text: "粘贴" },
                    { text: "剪切" }
                ]
            });

            var thememenu = new Ext.menu.Menu({
                items: [{
                    text: '颜色主题',
                    menu: new Ext.menu.Menu({
                        items: [{
                            text: '红色主题',
                            checked: true,
                            group: 'theme',
                            checkHandler: onMenuItem
                        },
                        {
                            text: '蓝色主题',
                            checked: false,
                            group: 'theme',
                            checkHandler: onMenuItem
                        },
                        {
                            text: '黑色主题',
                            checked: false,
                            group: 'theme',
                            checkHandler: onMenuItem
                        }

                        ]
                    })
                }, {
                    text: '是否启用',
                    checked:false
                }]
            })

            toolbar.add(
                { text: "文件", menu: filemenu },
                 { text: "编辑", menu: editmenu },
                 { text: "设置", menu: infomenu },
                 { text: "选择", menu: thememenu }
                );

            function onMenuItem(btn) {
                alert(btn.id + ":" + btn.text);
            }

            
        });
    </script>
</head>
<body>
    <div id="toolbar"></div>
</body>
</html>