toolbar.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Toolbars</title>
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
  6. <!-- GC -->
  7. <script type="text/javascript" src="../../ext-all.js"></script>
  8. <style type="text/css" media="screen">
  9. .add {
  10. background-image: url(../shared/icons/fam/add.gif) !important;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script type="text/javascript" charset="utf-8">
  16. Ext.onReady(function() {
  17. var panel = Ext.create('Ext.window.Window', {
  18. renderTo: Ext.getBody(),
  19. autoShow: true,
  20. height: 300,
  21. width: 500,
  22. title: 'Users',
  23. tbar: [
  24. {
  25. xtype: 'splitbutton',
  26. text: 'Add',
  27. iconCls: 'add',
  28. handler: function() {
  29. alert('add button clicked');
  30. },
  31. menu: [
  32. {
  33. text: 'Customer'
  34. },
  35. {
  36. text: 'Salesperson',
  37. menu: [
  38. {
  39. text: 'Senior'
  40. },
  41. {
  42. text: 'Junior'
  43. }
  44. ]
  45. }
  46. ]
  47. },
  48. '-',
  49. {
  50. iconCls: 'add'
  51. },
  52. '-',
  53. {
  54. text: 'Edit'
  55. },
  56. ' ',
  57. {
  58. text: 'Delete'
  59. },
  60. 'Your Name',
  61. {
  62. xtype: 'textfield',
  63. itemId: 'nameField'
  64. },
  65. {
  66. text: 'Go',
  67. handler: function() {
  68. alert(panel.down('#nameField').getValue());
  69. }
  70. },
  71. {text: 'Button 1'},
  72. {text: 'Button 1'},
  73. {text: 'Button 1'},
  74. {text: 'Button 1'},
  75. {text: 'Button 1'},
  76. {text: 'Button 1'}
  77. ]
  78. });
  79. });
  80. </script>
  81. </body>
  82. </html>