ExtJs之工具栏及菜单栏

最新推荐文章于 2017-11-01 14:44:00 发布
weixin_33701564
最新推荐文章于 2017-11-01 14:44:00 发布
阅读量113
点赞数
文章标签： javascript ViewUI
先培养一下大概的感觉吧。
基本按书上都弄出来了。
<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
        
    <script type="text/javascript">
            Ext.onReady(function(){
                var toolbar = new Ext.toolbar.Toolbar({
                    renderTo: 'toolbar',
                    width: 800
                });
                
                var infoMenu = new Ext.menu.Menu({
                    ignoreParentClicks: true,
                    plain: true,
                    items: [{
                        text: 'personal info',
                        menu: new Ext.menu.Menu({
                            ignoreParentClicks: true,
                            items: [{
                                text: 'basic info',
                                menu: new Ext.menu.Menu({
                                    items: [
                                        {text: 'height', handler: onMenuItem},
                                        {text: 'weight', handler: onMenuItem}
                                    ]
                                })
                            }]
                        })
                        },
                        {text: 'company info', handler: onMenuItem}
                    ]
                });
                
                var fileMenu = new Ext.menu.Menu({
                    shadow: 'frame',
                    allowOtherMenus: true,
                    items: [
                        new Ext.menu.Item({
                            text: 'new',
                            handler: onMenuItem
                        }),
                        new Ext.menu.Item({
                            text: 'open',
                            handler: onMenuItem
                        }),
                        new Ext.menu.Item({
                            text: 'close',
                            handler: onMenuItem
                        }),
                        new Ext.menu.Item({
                            xtype: 'textfield',
                            hideLabel: true,
                            width: 100
                        }),
                        new Ext.menu.Item({
                            text: 'select color',
                            menu: new Ext.menu.ColorPicker()
                        }),
                        new Ext.menu.Item({
                            xtype: 'textfield',
                            menu: new Ext.menu.DatePicker()
                        }),
                        {
                            xtype: 'buttongroup',
                            colums: 3,
                            title: 'buttons',
                            items: [{
                                text: 'user manage',
                                scale: 'large',
                                colspan: 3,
                                width: 170,
                                iconCls: 'userManagerIcon',
                                iconAlign: 'top'
                            },
                            {text: 'newnew', iconCls: 'newIcon'
                            }]
                        }
                    ]
                });
                
                var themeMenu = new Ext.menu.Menu({
                    items: [{
                        text: 'theme color',
                        menu: new Ext.menu.Menu({
                            items: [{
                                text: 'red theme',
                                checked: true,
                                group: 'theme',
                                checkHander: onItemCheck
                            }, {
                                text: 'blue theme',
                                checked: false,
                                group: 'theme',
                                checkHander: onItemCheck
                            }, {
                                text: 'black theme',
                                checked: false,
                                group: 'theme',
                                checkHander: onItemCheck
                            }]
                        })
                    }, {
                        text: 'isUse',
                        checked: false
                    }]
                });
                
                var editMenu = new Ext.menu.Menu({
                    shadow: 'drop',
                    allowOtherMenus: true,
                    items: [
                        {text: 'copy', handler: onMenuItem},
                        {text: 'paste', handler: onMenuItem},
                        {text: 'cut', handler: onMenuItem}
                    ]
                });
                toolbar.add([
                    {
                        text: 'file',
                        //handler: onButtonClick,
                        //iconCls: 'newIcon'
                        menu: fileMenu
                    },
                    {
                        text: 'edit',
                        //handler: onButtonClick,
                        //iconCls: 'openIcon'
                        menu: editMenu
                    },
                    {
                        text: 'save',
                        handler: onButtonClick,
                        iconCls: 'saveIcon'
                    },
                    {
                        text: 'config',
                        menu: infoMenu
                    },
                    {
                        text: 'style select',
                        menu: themeMenu
                    },
                    '-',
                    {
                        xtype: 'textfield',
                        hideLabel: true,
                        width: 150
                    },
                    '->',
                    '<a href=#>url</a>',
                    {
                        xtype: 'tbspacer',
                        width: 500
                    },
                    'static text'
                ]);
                
                function onMenuItem(item) {
                    alert(item.text);
                };
                
                function onButtonClick(btn) {
                    alert(btn.text);
                };
                Ext.get('enableBtn').on('click', function(){
                    toolbar.enable();
                });
                Ext.get('disabledleBtn').on('click', function(){
                    toolbar.disable();
                });
                function onItemCheck(item) {
                    alert(item.text);
                };
            });
    </script>
</head>
<body>
    <div id='toolbar'></div>
        <div >
            <button id="enableBtn">enableBtn<button>
            <button id="disabledleBtn">disabledleBtn<button>
        </div>
</body>
</html>