ExtJs菜单工具栏综合实例

来源：互联网发布：淘宝女人针织衫编辑：程序博客网时间：2024/06/05 16:41
<!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>
0 0