/** * A plugin to be used on form fields to show the field's label as the placeHolder text * when the field has no value. When the field has a value, the label will show above the field * with an animation. * * @example * Ext.Viewport.add({ * items : [ * { * xtype : 'textfield', * placeHolder : 'Company', * name : 'company', * value : 'Sencha Inc.', * plugins : [ * { * type : 'placeholderlabel' * } * ] * }, * { * xtype : 'textareafield', * placeHolder : 'Description', * name : 'description', * plugins : [ * { * type : 'placeholderlabel' * } * ] * } * ] * }); * * @deprecated 6.2.0 Placeholder as Label is now available as a config using the Neptune Theme */Ext.define('Ext.plugin.field.PlaceHolderLabel', { extend : 'Ext.plugin.Abstract', alias : 'plugin.placeholderlabel', config : { /** * @cfg {Ext.form.Field} field The field this plugin is bound too. * @private * @accessor */ field : null, /** * @cfg {Boolean} [labelVisible=false] A boolean value whether the label is shown or hidden. * The label should only be shown if the form field has a value. * @accessor */ labelVisible : false, /** * @cfg {String} [cls=x-placeholderlabel] The CSS class to be applied on the form field. * @accessor */ cls : Ext.baseCSSPrefix + 'placeholderlabel', /** * @cfg {String} [showCls=x-show-label] The CSS class to be applied on the form field when the label * is to be shown. * @accessor */ showCls : Ext.baseCSSPrefix + 'show-label' }, constructor : function(config) { this.initConfig(config); this.callParent([config]); }, init : function(field) { this.setField(field); //If the field has a value, show the label if (field.getValue()) { this.setLabelVisible(true); } }, /** * Determines whether to show or hide the field's label based on if the field has a value or not. * * @private * @param {Ext.form.Field} field */ maybeShowLabel : function(field) { this.setLabelVisible(!!field.getValue()); }, /** * Will add the keyup and clearicontap event listeners to the field to execute the {@link #maybeShowLabel} * method to show or hide the field's label. * * @private * @return {Object} The listener object */ getFieldListeners : function() { return { scope : this, keyup : this.maybeShowLabel, clearicontap : this.maybeShowLabel } }, updateField : function(newField, oldField) { var listeners = this.getFieldListeners(), cls = this.getCls(), label, config; if (oldField) { //remove listeners oldField.un(listeners); //remove the cls from the field oldField.removeCls(cls); } if (newField) { label = newField.getLabel(); config = { labelAlign : 'top' }; //if there is no label on the field, use the placeHolder if (!label) { config.label = newField.getPlaceHolder(); } //add listeners newField.on(listeners); //add the cls newField.addCls(cls); //sets the config to always have the labelAlign and label configs set on the field newField.setConfig(config); } }, updateLabelVisible : function(show) { var field = this.getField(); if (field) { field.toggleCls(this.getShowCls(), show); } }});