Extjs_工具栏和菜单栏

1：简单工具栏演示

Ext.onReady(function () {
            var tb = new Ext.Toolbar({
                renderTo: 'id1',
                width:300
            });
            tb.add([
                {text:'新建', handler:tbClick,iconCls:'newIcon'},
                { text: '打开', handler: tbClick, iconCls: 'openIcon' },
                { text: '保存', handler: tbClick, iconCls: 'saveIcon' }
            ]);
            function tbClick(btn) {
                alert(btn.text);
            }
        });

2：禁用和启用工具栏

 Ext.onReady(function () {
            var tb = new Ext.Toolbar({
                renderTo: 'id1',
                width:300
            });
            tb.add([
                {text:'新建', handler:tbClick,iconCls:'newIcon'},
                { text: '打开', handler: tbClick, iconCls: 'openIcon' },
                { text: '保存', handler: tbClick, iconCls: 'saveIcon' }
            ]);
            function tbClick(btn) {
                alert(btn.text);
            }
            Ext.get("enableBtn").on('click', function () { //get里面的参数是一个id为enableBtn的Button
                tb.enable();
            });
            Ext.get("disableBtn").on('click', function () { //get里面的参数是一个id为enableBtn的Button
                tb.disable();
            });

3：菜单栏初体验,这代码写的容易想砸电脑。脾气不好者慎重

 

 Ext.onReady(function () {
            //1创建一个Toolbar
            var Toolbar = new Ext.Toolbar({
                renderTo: 'id1',
                width:300
            });
            //2创建一个Menu对象
            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: '身高', handler: onMenuClick },
                                        { text: '体重', handler: onMenuClick }]
                                
                            })
                        }]
                    })
                }]
            });
            Toolbar.add({ text: '设置', menu: infoMenu })
            function onMenuClick(item) {
                alert(item.text);
            }
        });