Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 1st, 2012  |  syntax: None  |  size: 2.46 KB  |  hits: 25  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How do i add a toolbar to my layout in extjs?
  2. <script>
  3. Ext.onReady(function () {
  4. new Ext.Toolbar({renderTo: Ext.getBody(),
  5. items: [{
  6. xtype: 'button',
  7. text: 'Menu Button',
  8. menu: [{
  9. text: 'Better'
  10. }, {
  11. text: 'Good'
  12. }, {
  13. text: 'Best'
  14. }]
  15. },'->', {
  16. xtype: 'splitbutton',
  17. text: 'Split Button',
  18. menu: [{
  19. text: 'Item One'
  20. }, {
  21. text: 'Item Two'
  22. }, {
  23. text: 'Item Three'
  24. }]
  25. },'', {
  26. xtype: 'cycle',
  27. showText: true,
  28. minWidth: 100,
  29. prependText: 'Quality: ',
  30. items: [{
  31. text: 'High',
  32. checked: true
  33. }, {
  34. text: 'Medium'
  35. }, {
  36. text: 'Low'
  37. }]
  38. },]
  39. });
  40. });
  41. </script>
  42.        
  43. <script>
  44. var viewport = new Ext.Viewport({
  45. layout: "border",
  46. defaults: {
  47. bodyStyle: 'padding:10px;',
  48. },
  49. items: [{
  50. region: "north",
  51. html: 'North',
  52. margins: '5 5 5 5'
  53. }, {
  54. region: 'west',
  55. collapsible: true,
  56. title: 'Some Info',
  57. width: 200,
  58. html: 'West',
  59. margins: '0 0 0 5'
  60. }, {
  61. region: 'center',
  62. title: 'Our Info',
  63. html: 'Center',
  64. margins: '0 0 0 0'
  65. }, {
  66. region: 'east',
  67. collapsible: true,
  68. width: 200,
  69. title: 'Their Info',
  70. html: 'East',
  71. margins: '0 5 0 0'
  72. }, {
  73. region: 'south',
  74. title: 'Their Info',
  75. html: 'South',
  76. width: 200,
  77. margins: '5 5 5 5'
  78. }]
  79. });
  80. </script>
  81.        
  82. var viewport = new Ext.Viewport({
  83. layout: "border",
  84. tbar: new Ext.Toolbar({
  85. //Toolbar config options
  86. items: [{
  87. xtype: 'button',
  88. height: 27,
  89. text: 'Menu Button',
  90. menu: [{
  91. text: 'Better'
  92. }, {
  93. text: 'Good'
  94. }, {
  95. text: 'Best'
  96. }]
  97. }, '->',
  98. {
  99. xtype: 'splitbutton',
  100. text: 'Split Button',
  101. menu: [{
  102. text: 'Item One'
  103. }, {
  104. text: 'Item Two'
  105. }, {
  106. text: 'Item Three'
  107. }]
  108. }, '',
  109. {
  110. xtype: 'cycle',
  111. showText: true,
  112. minWidth: 100,
  113. prependText: 'Quality: ',
  114. items: [{
  115. text: 'High',
  116. checked: true
  117. }, {
  118. text: 'Medium'
  119. }, {
  120. text: 'Low'
  121. }]
  122. }, ]
  123. }),
  124. defaults: {
  125. bodyStyle: 'padding:10px;',
  126. },
  127. //layouf config
  128. tems: [{
  129. region: "north",
  130. html: 'North',
  131. margins: '5 5 5 5'
  132. }, {
  133. region: 'west',
  134. collapsible: true,
  135. title: 'Some Info',
  136. width: 200,
  137. html: 'West',
  138. margins: '0 0 0 5'
  139. }, {
  140. region: 'center',
  141. title: 'Our Info',
  142. html: 'Center',
  143. margins: '0 0 0 0'
  144. }, {
  145. region: 'east',
  146. collapsible: true,
  147. width: 200,
  148. title: 'Their Info',
  149. html: 'East',
  150. margins: '0 5 0 0'
  151. }, {
  152. region: 'south',
  153. title: 'Their Info',
  154. html: 'South',
  155. width: 200,
  156. margins: '5 5 5 5'
  157. }]
  158. });
  159.        
  160. var viewport = new Ext.Viewport({
  161.   layout: "fit",          
  162.   items: [
  163.     //We add one "main" panel that fills up entire Viewport
  164.     {
  165.       layout: "border",
  166.       defaults: {
  167.         bodyStyle: 'padding:10px;',
  168.       },
  169.       tbar: new Ext.Toolbar({
  170.         //your Toolbar config options
  171.       }),
  172.       items: [
  173.         //your panels here
  174.       ]
  175.     }
  176.   ]
  177.   ...
create a new version of this paste RAW Paste Data