ExtJs之工具栏及菜单栏
先培养一下大概的感觉吧。
基本按书上都弄出来了。
<!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>
