Clear Up
SharpKit Reference

HtmlEditorConfig Class

Namespace: Ext.form.field

Constructors

Name Description
HtmlEditorConfig(Object[])

Fields

Name Description
activeError If specified, then the component will be displayed with this value as its active error when first rendered. Use setActiveError or unsetActiveError to change it after component creation.
activeErrorsTpl The template used to format the Array of error messages passed to setActiveErrors into a single HTML string. By default this renders each message as an item in an unordered list. Defaults to: ["<tpl if="errors && errors.length">", "<ul><tpl for="errors"><li>{.}</li></tpl></ul>", "</tpl>"]
afterBodyEl An optional string or XTemplate configuration to insert in the field markup at the end of the input containing element. If an XTemplate is used, the component's render data serves as the context.
afterIFrameTpl An optional string or XTemplate configuration to insert in the field markup after the iframe element. If an XTemplate is used, the component's subTpl data serves as the context.
afterLabelTextTpl An optional string or XTemplate configuration to insert in the field markup after the label text. If an XTemplate is used, the component's render data serves as the context.
afterLabelTpl An optional string or XTemplate configuration to insert in the field markup after the label element. If an XTemplate is used, the component's render data serves as the context.
afterSubTpl An optional string or XTemplate configuration to insert in the field markup after the subTpl markup. If an XTemplate is used, the component's render data serves as the context.
afterTextAreaTpl An optional string or XTemplate configuration to insert in the field markup after the textarea element. If an XTemplate is used, the component's subTpl data serves as the context.
allowDomMove
applyTo
autoCreate
autoFitErrors Whether to adjust the component's body area to make room for 'side' or 'under' error messages. Defaults to: true
baseBodyCls The CSS class to be applied to the body content element. Defaults to: "x-form-item-body"
beforeBodyEl An optional string or XTemplate configuration to insert in the field markup at the beginning of the input containing element. If an XTemplate is used, the component's render data serves as the context.
beforeIFrameTpl An optional string or XTemplate configuration to insert in the field markup before the iframe element. If an XTemplate is used, the component's subTpl data serves as the context.
beforeLabelTextTpl An optional string or XTemplate configuration to insert in the field markup before the label text. If an XTemplate is used, the component's render data serves as the context.
beforeLabelTpl An optional string or XTemplate configuration to insert in the field markup before the label element. If an XTemplate is used, the component's render data serves as the context.
beforeSubTpl An optional string or XTemplate configuration to insert in the field markup before the subTpl markup. If an XTemplate is used, the component's render data serves as the context.
beforeTextAreaTpl An optional string or XTemplate configuration to insert in the field markup before the textarea element. If an XTemplate is used, the component's subTpl data serves as the context.
clearCls The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to provide field clearing. Defaults to: "x-clear"
createLinkText The default text for the create link prompt Defaults to: "Please enter the URL for the link:"
defaultLinkValue The default value for the create link prompt Defaults to: "http://"
defaultValue A default value to be put into the editor to resolve focus issues. Defaults to (Non-breaking space) in Opera and IE6, (Zero-width space) in all other browsers.
enableAlignments Enable the left, center, right alignment buttons Defaults to: true
enableColors Enable the fore/highlight color buttons Defaults to: true
enableFont Enable font selection. Not available in Safari. Defaults to: true
enableFontSize Enable the increase/decrease font size buttons Defaults to: true
enableFormat Enable the bold, italic and underline buttons Defaults to: true
enableLinks Enable the create link button. Not available in Safari. Defaults to: true
enableLists Enable the bullet and numbered list buttons. Not available in Safari. Defaults to: true
enableSourceEdit Enable the switch to source edit button. Not available in Safari. Defaults to: true
errorMsgCls The CSS class to be applied to the error message element. Defaults to: "x-form-error-msg"
fieldBodyCls An extra CSS class to be applied to the body content element in addition to baseBodyCls. Defaults to: ""
fieldCls
fieldLabel The label for the field. It gets appended with the labelSeparator, and its position and sizing is determined by the labelAlign, labelWidth, and labelPad configs.
focusCls
fontFamilies An array of available font families Defaults to: ["Arial", "Courier New", "Tahoma", "Times New Roman", "Verdana"]
formItemCls A CSS class to be applied to the outermost element to denote that it is participating in the form field layout. Defaults to: "x-form-item"
hideEmptyLabel When set to true, the label element (fieldLabel and labelSeparator) will be automatically hidden if the fieldLabel is empty. Setting this to false will cause the empty label element to be rendered and space to be reserved for it; this is useful if you want a field without a label to line up with other labeled fields in the same form. If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the hideLabel config to true. Defaults to: true
hideLabel Set to true to completely hide the label element (fieldLabel and labelSeparator). Also see hideEmptyLabel, which controls whether space will be reserved for an empty fieldLabel. Defaults to: false
iframeAttrTpl An optional string or XTemplate configuration to insert in the field markup inside the iframe element (as attributes). If an XTemplate is used, the component's subTpl data serves as the context.
inputType
invalidCls Overrides: Ext.form.Labelable.invalidCls
invalidText
labelableRenderTpl The rendering template for the field decorations. Component classes using this mixin should include logic to use this as their renderTpl, and implement the getSubTplMarkup method to generate the field body content. The structure of a field is a table as follows: If labelAlign: 'left',msgTarget: 'side'`
+----------------------+----------------------+-------------+
           | Label:               | InputField           | sideErrorEl |
           +----------------------+----------------------+-------------+
            
If labelAlign: 'left',msgTarget: 'under'`
+----------------------+------------------------------------+
           | Label:               | InputField      (colspan=2)        |
           |                      | underErrorEl                       |
           +----------------------+------------------------------------+
            
If labelAlign: 'top',msgTarget: 'side'`
+---------------------------------------------+-------------+
           | label                                       |             |
           | InputField                                  | sideErrorEl |
           +---------------------------------------------+-------------+
            
If labelAlign: 'top',msgTarget: 'under'`
+-----------------------------------------------------------+
           | label                                                     |
           | InputField                      (colspan=2)               |
           | underErrorEl                                              |
           +-----------------------------------------------------------+
            
The total columns always the same for fields with each setting of labelAlign because when rendered into a Ext.layout.container.Form layout, just the TR of the table will be placed into the form's main TABLE, and the columns of all the siblings must match so that they all line up. In a Ext.layout.container.Form layout, different settings of labelAlign are not supported because of the incompatible column structure. When the triggerCell or side error cell are hidden or shown, the input cell's colspan is recalculated to maintain the correct 3 visible column count. Defaults to: ["<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>", "<tpl if="labelOnLeft">", "<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>", "{beforeLabelTpl}", "<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"", "<tpl if="labelStyle"> style="{labelStyle}"</tpl>>", "{beforeLabelTextTpl}", "<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>", "{afterLabelTextTpl}", "</label>", "{afterLabelTpl}", "</td>", "</tpl>", "<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">", "{beforeBodyEl}", "<tpl if="labelAlign==\'top\'">", "{beforeLabelTpl}", "<div id="{id}-labelCell" style="{labelCellStyle}">", "<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"", "<tpl if="labelStyle"> style="{labelStyle}"</tpl>>", "{beforeLabelTextTpl}", "<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>", "{afterLabelTextTpl}", "</label>", "</div>", "{afterLabelTpl}", "</tpl>", "{beforeSubTpl}", "{[values.$comp.getSubTplMarkup()]}", "{afterSubTpl}", "<tpl if="msgTarget===\'side\'">", "{afterBodyEl}", "</td>", "<td id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">", "<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none;width:{errorIconWidth}px"></div>", "</td>", "<tpl elseif="msgTarget==\'under\'">", "<div id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>", "{afterBodyEl}", "</td>", "</tpl>", "</tr>", {disableFormats: true}]
labelAlign Controls the position and alignment of the fieldLabel. Valid values are:
  • "left" (the default) - The label is positioned to the left of the field, with its text aligned to the left. Its width is determined by the labelWidth config.
  • "top" - The label is positioned above the field.
  • "right" - The label is positioned to the left of the field, with its text aligned to the right. Its width is determined by the labelWidth config.
  • Defaults to: "left"
    labelAttrTpl An optional string or XTemplate configuration to insert in the field markup inside the label element (as attributes). If an XTemplate is used, the component's render data serves as the context.
    labelCls The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector and drives the field layout where it is concatenated with a hyphen ('-') and labelAlign. To add additional classes, use labelClsExtra. Defaults to: "x-form-item-label"
    labelClsExtra An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.
    labelPad The amount of space in pixels between the fieldLabel and the input field. Defaults to: 5
    labelSeparator Character(s) to be inserted at the end of the label text. Set to empty string to hide the separator completely. Defaults to: ":"
    labelStyle A CSS style specification string to apply directly to this field's label.
    labelWidth The width of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right". Defaults to: 100
    msgFx
    msgTarget The location where the error message text should display. Must be one of the following values:
  • qtip Display a quick tip containing the message when the user hovers over the field. This is the default.

    Ext.tip.QuickTipManager.init must have been called for this setting to work.

  • title Display the message in a default browser title attribute popup.

  • under Add a block div beneath the field containing the error message.
  • side Add an error icon to the right of the field, displaying the message in a popup on hover.
  • none Don't display any error message. This might be useful if you are implementing custom error display.
  • [element id] Add the error message directly to the innerHTML of the specified element.
  • Defaults to: "qtip"
    name The name of the field. By default this is used as the parameter name when including the field value in a form submit(). To prevent the field from being included in the form submit, set submitValue to false.
    preventMark true to disable displaying any error message set on this object. Defaults to: false
    readOnly
    submitValue Setting this to false will prevent the field from being submitted even when it is not disabled. Defaults to: true
    tabIndex
    validateOnChange Specifies whether this field should be validated immediately whenever a change in its value is detected. If the validation results in a change in the field's validity, a validitychange event will be fired. This allows the field to show feedback about the validity of its contents immediately as the user is typing. When set to false, feedback will not be immediate. However the form will still be validated before submitting if the clientValidation option to Ext.form.Basic.doAction is enabled, or if the field or form are validated manually. See also Ext.form.field.Base.checkChangeEvents for controlling how changes to the field's value are detected. Defaults to: true
    value A value to initialize this field with.
    © Copyright 2005-2011 SharpKit. All rights reserved.