ButtonGroup.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-container-ButtonGroup'>/**
  19. </span> * Provides a container for arranging a group of related Buttons in a tabular manner.
  20. *
  21. * @example
  22. * Ext.create('Ext.panel.Panel', {
  23. * title: 'Panel with ButtonGroup',
  24. * width: 300,
  25. * height:200,
  26. * renderTo: document.body,
  27. * bodyPadding: 10,
  28. * html: 'HTML Panel Content',
  29. * tbar: [{
  30. * xtype: 'buttongroup',
  31. * columns: 3,
  32. * title: 'Clipboard',
  33. * items: [{
  34. * text: 'Paste',
  35. * scale: 'large',
  36. * rowspan: 3,
  37. * iconCls: 'add',
  38. * iconAlign: 'top',
  39. * cls: 'btn-as-arrow'
  40. * },{
  41. * xtype:'splitbutton',
  42. * text: 'Menu Button',
  43. * scale: 'large',
  44. * rowspan: 3,
  45. * iconCls: 'add',
  46. * iconAlign: 'top',
  47. * arrowAlign:'bottom',
  48. * menu: [{ text: 'Menu Item 1' }]
  49. * },{
  50. * xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
  51. * },{
  52. * text: 'Copy', iconCls: 'add16'
  53. * },{
  54. * text: 'Format', iconCls: 'add16'
  55. * }]
  56. * }]
  57. * });
  58. *
  59. */
  60. Ext.define('Ext.container.ButtonGroup', {
  61. extend: 'Ext.panel.Panel',
  62. alias: 'widget.buttongroup',
  63. alternateClassName: 'Ext.ButtonGroup',
  64. requires: ['Ext.layout.container.Table'],
  65. <span id='Ext-container-ButtonGroup-cfg-columns'> /**
  66. </span> * @cfg {Number} columns
  67. * The `columns` configuration property passed to the {@link #layout configured layout manager}.
  68. * See {@link Ext.layout.container.Table#columns}.
  69. */
  70. <span id='Ext-container-ButtonGroup-cfg-baseCls'> /**
  71. </span> * @cfg {String} baseCls
  72. * @inheritdoc
  73. */
  74. baseCls: Ext.baseCSSPrefix + 'btn-group',
  75. <span id='Ext-container-ButtonGroup-cfg-layout'> /**
  76. </span> * @cfg {Object} layout
  77. * @inheritdoc
  78. */
  79. layout: {
  80. type: 'table'
  81. },
  82. defaultType: 'button',
  83. <span id='Ext-container-ButtonGroup-cfg-frame'> /**
  84. </span> * @cfg {Boolean} frame
  85. * @inheritdoc
  86. */
  87. frame: true,
  88. frameHeader: false,
  89. titleAlign: 'center',
  90. initComponent : function() {
  91. // Copy the component's columns config to the layout if specified
  92. var me = this,
  93. cols = me.columns;
  94. me.noTitleCls = me.baseCls + '-notitle';
  95. if (cols) {
  96. me.layout = Ext.apply({}, {columns: cols}, me.layout);
  97. }
  98. if (!me.title) {
  99. me.addCls(me.noTitleCls);
  100. }
  101. me.callParent(arguments);
  102. },
  103. // private
  104. onBeforeAdd: function(component) {
  105. if (component.isButton) {
  106. component.ui = component.ui + '-toolbar';
  107. }
  108. this.callParent(arguments);
  109. },
  110. //private
  111. applyDefaults: function(c) {
  112. if (!Ext.isString(c)) {
  113. c = this.callParent(arguments);
  114. }
  115. return c;
  116. }
  117. <span id='Ext-container-ButtonGroup-cfg-tools'> /**
  118. </span> * @cfg {Array} tools
  119. * @private
  120. */
  121. <span id='Ext-container-ButtonGroup-cfg-collapsible'> /**
  122. </span> * @cfg {Boolean} collapsible
  123. * @private
  124. */
  125. <span id='Ext-container-ButtonGroup-cfg-collapseMode'> /**
  126. </span> * @cfg {Boolean} collapseMode
  127. * @private
  128. */
  129. <span id='Ext-container-ButtonGroup-cfg-animCollapse'> /**
  130. </span> * @cfg {Boolean} animCollapse
  131. * @private
  132. */
  133. <span id='Ext-container-ButtonGroup-cfg-closable'> /**
  134. </span> * @cfg {Boolean} closable
  135. * @private
  136. */
  137. });
  138. </pre>
  139. </body>
  140. </html>