工具栏和菜单条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script typt="text/javascript" src="../ext/ext-all.js"></script>

    <link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
    <link rel="stylesheet" href="../css/工具和菜单条.css"/>
</head>
<body>
<div id="toolbar" ></div><!--工具栏-->
<input type="button" id="enable" value="启用工具栏"/>
<input type="button" id="disable" value="禁用工具栏"/>
<script typt="text/javascript">
    Ext.onReady(function(){
        var tool=new Ext.toolbar.Toolbar({
            renderTo:'toolbar',
            width:500
        });
        tool.add([{
            text:'新建文件',
            iconCls:'createFile',/*类样式*/
            handler:btnClick,
            menu: new Ext.menu.Menu({
                shadow:'drop',
                items:[{
                    text:'新建World文件',

                    menu:new Ext.menu.Menu({
                        shadow:'drop',
                        items:[{
                            text:'创建97-2003版本',
                            icon:'../image/tianjia.png',
                            menu:new Ext.menu.Menu({
                                shadow:'drop',
                                items:[{
                                    text:'颜色选择',
                                    menu:new Ext.menu.ColorPicker()
                                },{
                                    text:'日期选额',
                                    menu:new Ext.menu.DatePicker()
                                }]
                            })
                        },{
                            text:'创建2008版本'
                        }]
                    })
                },{
                    text:'新建Excel文件'
                },{
                    text:'新建PPT文件'
                }]
            })
        },{
            text:'打开文件',
            iconCls:'openFile',
            handler:btnClick,
            menu:new Ext.menu.Menu({
                shadow:'drop',
                items:[{
                    text:'打开Word 文件'
                },{
                    text:'打开Excel文件'
                },{
                    text:'打开PPT文件'
                }]
            })
        },{
            text:'保存文件',
            iconCls:'saveFile',
            handler:btnClick
        },'-',{
            xtype:'textfield',
            hideLabel:true,
            width:100
        },'->','<a href="http://www.baidu.com">百度</a>','百度']);
        function btnClick(btn){
           /* alert(btn.text);*/
        }
        /*启用和禁用工具栏*/
        Ext.get("enable").on("click",function(){
            tool.enable();
        });
        Ext.get("disable").on("click",function(){
            tool.disable();
        });
    });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42666837/article/details/83618956