add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / form / field / Display.js

/**\r
 * A display-only text field which is not validated and not submitted. This is useful for when you want to display a\r
 * value from a form's {@link Ext.form.Basic#load loaded data} but do not want to allow the user to edit or submit that\r
 * value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains HTML markup that you do not want\r
 * to be rendered.\r
 *\r
 * If you have more complex content, or need to include components within the displayed content, also consider using a\r
 * {@link Ext.form.FieldContainer} instead.\r
 *\r
 * Example:\r
 *\r
 *     @example\r
 *     Ext.create('Ext.form.Panel', {\r
 *         renderTo: Ext.getBody(),\r
 *         width: 175,\r
 *         height: 150,\r
 *         bodyPadding: 10,\r
 *         title: 'Final Score',\r
 *         items: [{\r
 *             xtype: 'displayfield',\r
 *             fieldLabel: 'Home',\r
 *             name: 'home_score',\r
 *             value: '10'\r
 *         }, {\r
 *             xtype: 'displayfield',\r
 *             fieldLabel: 'Visitor',\r
 *             name: 'visitor_score',\r
 *             value: '11'\r
 *         }],\r
 *         buttons: [{\r
 *             text: 'Update'\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.form.field.Display', {\r
    extend:'Ext.form.field.Base',\r
    alias: 'widget.displayfield',\r
    requires: ['Ext.util.Format', 'Ext.XTemplate'],\r
    alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],\r
    \r
    fieldSubTpl: [\r
        '<div id="{id}" data-ref="inputEl" tabindex="-1" role="textbox" aria-readonly="true"',\r
        ' aria-labelledby="{cmpId}-labelEl" {inputAttrTpl}',\r
        '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>', \r
        ' class="{fieldCls} {fieldCls}-{ui}">{value}</div>',\r
        {\r
            compiled: true,\r
            disableFormats: true\r
        }\r
    ],\r
    \r
    // We have the ARIA markup pre-rendered so we don't want it to be applied\r
    ariaRole: undefined,\r
    \r
    focusable: false,\r
\r
    /**\r
     * @cfg {Boolean} readOnly\r
     * @private\r
     */\r
    readOnly: true,\r
\r
    /**\r
     * @cfg {String} [fieldCls="x-form-display-field"]\r
     * The default CSS class for the field.\r
     */\r
    fieldCls: Ext.baseCSSPrefix + 'form-display-field',\r
\r
    fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body',\r
\r
    /**\r
     * @cfg {Boolean} htmlEncode\r
     * True to escape HTML in text when rendering it.\r
     */\r
    htmlEncode: false,\r
    \r
    /**\r
     * @cfg {Function} renderer\r
     * A function to transform the raw value for display in the field.\r
     * \r
     *     Ext.create('Ext.form.Panel', {\r
     *         renderTo: document.body,\r
     *         width: 175,\r
     *         bodyPadding: 10,\r
     *         title: 'Final Score',\r
     *         items: [{\r
     *             xtype: 'displayfield',\r
     *             fieldLabel: 'Grade',\r
     *             name: 'final_grade',\r
     *             value: 68,\r
     *             renderer: function (value, field) {\r
     *                 var color = (value < 70) ? 'red' : 'black';\r
     *                 return '<span style="color:' + color + ';">' + value + '</span>';\r
     *             }\r
     *         }]\r
     *     });\r
     * \r
     * @param {Object} value The raw field {@link #value}\r
     * @param {Ext.form.field.Display} field The display field\r
     * @return {String} displayValue The HTML string to be rendered\r
     */\r
    \r
    /**\r
     * @cfg {Object} scope\r
     * The scope to execute the {@link #renderer} function. Defaults to this.\r
     */\r
\r
    noWrap: false,\r
    \r
    /**\r
     * @cfg {Boolean} validateOnChange\r
     * @private\r
     */\r
    validateOnChange: false,\r
\r
    initEvents: Ext.emptyFn,\r
\r
    submitValue: false,\r
\r
    getValue: function() {\r
        return this.value;\r
    },\r
    \r
    valueToRaw: function(value) {\r
        if (value || value === 0 || value === false) {\r
            return value;\r
        } else {\r
            return '';\r
        }\r
    },\r
    \r
    isDirty: function(){\r
        return false;\r
    },\r
\r
    isValid: Ext.returnTrue,\r
\r
    validate: Ext.returnTrue,\r
\r
    getRawValue: function() {\r
        return this.rawValue;\r
    },\r
\r
    setRawValue: function(value) {\r
        var me = this;\r
            \r
        value = Ext.valueFrom(value, '');\r
        me.rawValue = value;\r
        if (me.rendered) {\r
            me.inputEl.dom.innerHTML = me.getDisplayValue();\r
            me.updateLayout();\r
        }\r
        return value;\r
    },\r
\r
    /**\r
     * @private\r
     * Format the value to display.\r
     */\r
    getDisplayValue: function() {\r
        var me = this,\r
            value = this.getRawValue(),\r
            display;\r
        if (me.renderer) {\r
             display = me.renderer.call(me.scope || me, value, me);\r
        } else {\r
             display = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;\r
        }\r
        return display;\r
    },\r
        \r
    getSubTplData: function(fieldData) {\r
        var ret = this.callParent(arguments);\r
\r
        ret.value = this.getDisplayValue();\r
\r
        return ret;\r
    }\r
\r
    /**\r
     * @cfg {String} inputType\r
     * @private\r
     */\r
    /**\r
     * @cfg {Boolean} disabled\r
     * @private\r
     */\r
    /**\r
     * @cfg {Number} checkChangeEvents\r
     * @private\r
     */\r
    /**\r
     * @cfg {Number} checkChangeBuffer\r
     * @private\r
     */\r
});\r