Label2.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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-form-Label'>/**
  19. </span> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  20. *
  21. * Produces a standalone `&lt;label /&gt;` element which can be inserted into a form and be associated with a field
  22. * in that form using the {@link #forId} property.
  23. *
  24. * **NOTE:** in most cases it will be more appropriate to use the {@link Ext.form.Labelable#fieldLabel fieldLabel}
  25. * and associated config properties ({@link Ext.form.Labelable#labelAlign}, {@link Ext.form.Labelable#labelWidth},
  26. * etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.
  27. * Ext.form.Label should only be used when your layout can not be achieved with the standard
  28. * {@link Ext.form.Labelable field layout}.
  29. *
  30. * You will likely be associating the label with a field component that extends {@link Ext.form.field.Base}, so
  31. * you should make sure the {@link #forId} is set to the same value as the {@link Ext.form.field.Base#inputId inputId}
  32. * of that field.
  33. *
  34. * The label's text can be set using either the {@link #text} or {@link #html} configuration properties; the
  35. * difference between the two is that the former will automatically escape HTML characters when rendering, while
  36. * the latter will not.
  37. *
  38. * # Example
  39. *
  40. * This example creates a Label after its associated Text field, an arrangement that cannot currently
  41. * be achieved using the standard Field layout's labelAlign.
  42. *
  43. * @example
  44. * Ext.create('Ext.form.Panel', {
  45. * title: 'Field with Label',
  46. * width: 400,
  47. * bodyPadding: 10,
  48. * renderTo: Ext.getBody(),
  49. * layout: {
  50. * type: 'hbox',
  51. * align: 'middle'
  52. * },
  53. * items: [{
  54. * xtype: 'textfield',
  55. * hideLabel: true,
  56. * flex: 1
  57. * }, {
  58. * xtype: 'label',
  59. * forId: 'myFieldId',
  60. * text: 'My Awesome Field',
  61. * margin: '0 0 0 10'
  62. * }]
  63. * });
  64. */
  65. Ext.define('Ext.form.Label', {
  66. extend:'Ext.Component',
  67. alias: 'widget.label',
  68. requires: ['Ext.util.Format'],
  69. autoEl: 'label',
  70. <span id='Ext-form-Label-cfg-text'> /**
  71. </span> * @cfg {String} [text='']
  72. * The plain text to display within the label. If you need to include HTML
  73. * tags within the label's innerHTML, use the {@link #html} config instead.
  74. */
  75. <span id='Ext-form-Label-cfg-forId'> /**
  76. </span> * @cfg {String} forId
  77. * The id of the input element to which this label will be bound via the standard HTML 'for'
  78. * attribute. If not specified, the attribute will not be added to the label. In most cases you will be
  79. * associating the label with a {@link Ext.form.field.Base} component, so you should make sure this matches
  80. * the {@link Ext.form.field.Base#inputId inputId} of that field.
  81. */
  82. <span id='Ext-form-Label-cfg-html'> /**
  83. </span> * @cfg {String} [html='']
  84. * An HTML fragment that will be used as the label's innerHTML.
  85. * Note that if {@link #text} is specified it will take precedence and this value will be ignored.
  86. */
  87. maskOnDisable: false,
  88. getElConfig: function(){
  89. var me = this;
  90. me.html = me.text ? Ext.util.Format.htmlEncode(me.text) : (me.html || '');
  91. return Ext.apply(me.callParent(), {
  92. htmlFor: me.forId || ''
  93. });
  94. },
  95. <span id='Ext-form-Label-method-setText'> /**
  96. </span> * Updates the label's innerHTML with the specified string.
  97. * @param {String} text The new label text
  98. * @param {Boolean} [encode=true] False to skip HTML-encoding the text when rendering it
  99. * to the label. This might be useful if you want to include tags in the label's innerHTML rather
  100. * than rendering them as string literals per the default logic.
  101. * @return {Ext.form.Label} this
  102. */
  103. setText : function(text, encode){
  104. var me = this;
  105. encode = encode !== false;
  106. if(encode) {
  107. me.text = text;
  108. delete me.html;
  109. } else {
  110. me.html = text;
  111. delete me.text;
  112. }
  113. if(me.rendered){
  114. me.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(text) : text;
  115. me.updateLayout();
  116. }
  117. return me;
  118. }
  119. });
  120. </pre>
  121. </body>
  122. </html>