Class CQ.form.TableEdit2

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout (or subclass thereof). based layout manager, for example:

See CQ.Ext.layout.AnchorLayout.anchor also.

Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component.

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes CQ.Ext.Component, CQ.Ext.BoxComponent, and CQ.Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:

{
    xtype: 'box',
    autoEl: {
        tag: 'img',
        src: 'http://www.example.com/example.jpg'
    }
}, {
    xtype: 'box',
    autoEl: {
        tag: 'blockquote',
        html: 'autoEl is cool!'
    }
}, {
    xtype: 'container',
    autoEl: 'ul',
    cls: 'ux-unordered-list',
    items: {
        xtype: 'box',
        autoEl: 'li',
        html: 'First list item'
    }
}

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manager. Defaults to false.

Note: Although many components inherit this config option, not all will function as expected with a width of 'auto'. Setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.

If the browser is managing the width, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the width might result in elements needing to be synchronized with the new width. For example, where the target element is:

<div id='grid-container' style='margin-left:25%;width:50%'></div>

var myPanel = new CQ.Ext.Panel({
    renderTo: 'grid-container',
    monitorResize: true, // relay on browser resize
    title: 'Panel',
    height: 400,
    autoWidth: true,
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        title: 'Box 1',
    }, {
        title: 'Box 2'
    }, {
        title: 'Box 3'
    }],
});

The maximum value in pixels which this BoxComponent will set its width to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this BoxComponent will set its width to.

Warning: This will override any size management applied by layout managers.

The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide field clearing (defaults to 'x-form-clear-left').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. CQ.Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See CQ.Ext.layout.FormLayout.fieldTpl also.

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

• Description :
  This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
• Notes :
  The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
  The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.
  Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

An optional extra CSS class that will be added to this component's container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See CQ.Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

ctCls: 'x-box-layout-ct custom-class'

Default mode when pasting is executed using the Ctrl + V key or the main paste button (defaults to "wordhtml").

Valid values are:

• "browser" - use browser's paste implementation (should usually not be used, as this may introduce unwanted markup or markup that could cause the RichText component to crash);
• "plaintext" - for plain text inserts;
• "wordhtml" - for Word-compatible HTML pasting (this should suffice for most use cases, as it will keep most of the formatting, but removes unsuitable tags and attributes.

The label text to display next to this Component (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. CQ.Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and CQ.Ext.layout.FormLayout.fieldTpl.

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});

Note: this config is only used when this Component is rendered by a Container which has been configured to use a BoxLayout. Each child Component with a flex property will be flexed either vertically (by a VBoxLayout) or horizontally (by an HBoxLayout) according to the item's relative flex value compared to the sum of all Components with flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting this to true will cause the field to not reserve that space.

Note: see the note for clearCls.

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with CQ.getCmp, use itemId with CQ.Ext.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts with CQ.Ext.ComponentMgr which requires a unique id.

var c = new CQ.Ext.Panel({ //
    height: 300,
    renderTo: document.body,
    layout: 'auto',
    items: [
        {
            itemId: 'p1',
            title: 'Panel 1',
            height: 150
        },
        {
            itemId: 'p2',
            title: 'Panel 2',
            height: 150
        }
    ]
})
p1 = c.getComponent('p1'); // not the same as CQ.Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

Note: see the note for clearCls.

Also see hideLabel and CQ.Ext.layout.FormLayout.fieldTpl.

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='
    }]
});

Configuration of the linkbrowse dialog. You may use the following properties:

• protocols : String[]
  A list of available prototcols; use the entire protocol prefix (e.g. "http://", "ftp://")
• defaultProtocol : String
  The default protocol value; must be one of the values specified by "protocols"
• targetConfig : Object
  Defines how to handle the "target" attribute of the link being edited. Properties:
  • mode : String
    Specifies the target mode; valid values are: "auto" - means that an automatic target is chosen (specified by the "targetExternal" property for external links and "targetInternal" for internal links). "manual" - means that the user can specify a target through an input field, "none" if no target attribute may be provided.
  • targetInternal : String
    The target for internal links (only if mode == "auto")
  • targetExternal : String
    The target for external links (only if mode == "auto")
• cssInternal (String) - CSS class to be used for internal links
• cssExternal (String) - CSS class to be used for external links
• linkAttributes (Object[]) - Array with definitions of additional link attributes that are available for editing through the link dialog. The objects of the array should have the following properties:
  • attribute : String
    The attribute to edit
  • xtype : String
    The xtype of the component used for editing (currently, you should only use "textfield")
  • fieldLabel : String
    The label to be used for the component

Note that the link feature must be enabled through the "links" plugin for this configuration to take effect. Defaults to:

{
    "protocols": [
        "http://",
        "ftp://",
        "mailto:"
    ],
    "targetConfig": {
        "mode": "manual"
    },
    "cssExternal": null,
    "cssInternal": null
}

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses.

An object containing margins to apply to this BoxComponent in the format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:

Defaults to:

{top:0, right:0, bottom:0, left:0}

The location where the message text set through markInvalid should display. Must be one of the following values:

Note: this only sets the element's readOnly DOM attribute. Setting readOnly=true, for example, will not disable triggering a ComboBox or DateField; it gives you the option of forcing the user to choose via the trigger without typing in the text box. To hide the trigger use hideTrigger.

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See CQ.Ext.layout.BorderLayout also.

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

See render also.

This is the root of all plugin-specific configuration.

You must provide a config element for each plugin you are about to configure. Use the plugin's ID (see class documentation) as the property name for the corresponding config element. Each config element has config options that are used by all plugins, and plugin-specific options. Commonly used options are:

• features : String[]/String
  A String[] that contains all features of a plugin that should be enabled; alternatively a String "*" may be provided to enable all features of the corresponding plugin
• tooltips : Object
  An object that defines the tooltips for the plugin's icons. Property name specifies the name of the icon (usually the ID of the feature that is represented by the icon; the value has a tooltip description object as required by Ext.

Plugin-specific options are documented at the respective plugin. Note that this object is null after constructing the RichText object has finished, as the configuration is transferred to the respective plugin.

Configuration of the special characters component. Valid config properties are:

• chars : Object
  Table of characters to be added to the special character dialog. Choose the property name for each element at your discretion. Each element defines a single character or a range of characters:
  • Use an "entity" property (String) to specify the HTML entity of a single character (for example: "©").
  • Use "rangeStart" (Number)/"rangeEnd" (Number) properties to specify a range of unicode characters. Both rangeStart and rangeEnd must specify the numeric representation of a unicode character. Note that the character specified as rangeEnd is also included in the specified range.
• tableCls : String
  The CSS class to be used for formatting the table that displays the special characters.
• cellCls : String
  The CSS class to be used for formatting cells of the character table.
• overCls : String
  The CSS class to be used for formatting cells of the character table if rolledover.
• magnifyCls : String
  CSS class to be used for the magnified view of the currently rolledover character.

Defaults to:

{
    "tableCls": "cq-rte-scd-table",
    "cellCls": "cq-rte-scd-cell",
    "overCls": "cq-rte-scd-cell-over",
    "magnifyCls": "cq-rte-scd-magnify",
    "chars": {
        "copyright": {
            "entity": "©"
        },
        "registered": {
            "entity": "®"
        },
        "trademark": {
            "entity": "™"
        }
    }
}

See stateful for an explanation of saving and restoring Component state.

True if HTML tags should be stripped off before inserting it on paste (defaults to true).

The use-case for this option is a bit hard to explain: The system clipboard works MIME type-based. If you select text from a web page directly, the clipboard will usually contain a text/plain and a text/html variant of the selected text. The plain text variant will contain no HTML tags at all, the text/html variant will contain HTML as we would expect it. On the other hand, if you copy HTML code from any source view, you will get at least get a text/plain variant, containing all tags. In some cases (for example if you are using Firefox' "View source"), you will get an additional text/html variant, that will contain the HTML-tags in an entitiy encoded way (<b>bold text</b>). On paste, the browser will paste the text/html variant if available, the text/plain variant otherwise. Given the second use-case, the HTML tags will appear in the pasted content, as they get either entity encoded by the browser (text/plain) or are already entity-encoded (text/html) on paste. This is where this option kicks in: By setting it to true, the HTML tags from such a source code paste get removed before the pasted content is inserted in the text being edited.

Note that this optiion will only work if defaultPasteMode is set to "plaintext".

A table with definitions of tags that must be replaced by another tag to ensure correct editing. Each property name defines the tag name to replace, the corresponding value defines the tag name of the replacement.

This is necessary because each browser creates markup "at will". For example, hitting the "bold" button may result in surrounding the selected text with a "strong" tag or a "b" tag, depending on the browser you are using. Worse, browser A may create markup that is not editable by browser B. Hence this table provides means to ensure that markup is reduced to a subset that is suitable for all supported browsers.

Note that this option currently cannot handle attributes.

Defaults to { "strong": "b", "em": "i" } (CQ 5.2) resp. null (CQ 5.3).