src/layout/component/field/Text.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @private
  17  * @class Ext.layout.component.field.Text
  18  * @extends Ext.layout.component.field.Field
  19  * Layout class for {@link Ext.form.field.Text} fields. Handles sizing the input field.
  20  */
  21 Ext.define('Ext.layout.component.field.Text', {
  22     extend: 'Ext.layout.component.field.Field',
  23     alias: 'layout.textfield',
  24     requires: ['Ext.util.TextMetrics'],
  25
  26     type: 'textfield',
  27
  28
  29     /**
  30      * Allow layout to proceed if the {@link Ext.form.field.Text#grow} config is enabled and the value has
  31      * changed since the last layout.
  32      */
  33     beforeLayout: function(width, height) {
  34         var me = this,
  35             owner = me.owner,
  36             lastValue = this.lastValue,
  37             value = owner.getRawValue();
  38         this.lastValue = value;
  39         return me.callParent(arguments) || (owner.grow && value !== lastValue);
  40     },
  41
  42
  43     /**
  44      * Size the field body contents given the total dimensions of the bodyEl, taking into account the optional
  45      * {@link Ext.form.field.Text#grow} configurations.
  46      * @param {Number} width The bodyEl width
  47      * @param {Number} height The bodyEl height
  48      */
  49     sizeBodyContents: function(width, height) {
  50         var size = this.adjustForGrow(width, height);
  51         this.setElementSize(this.owner.inputEl, size[0], size[1]);
  52     },
  53
  54
  55     /**
  56      * Given the target bodyEl dimensions, adjust them if necessary to return the correct final
  57      * size based on the text field's {@link Ext.form.field.Text#grow grow config}.
  58      * @param {Number} width The bodyEl width
  59      * @param {Number} height The bodyEl height
  60      * @return {Number[]} [inputElWidth, inputElHeight]
  61      */
  62     adjustForGrow: function(width, height) {
  63         var me = this,
  64             owner = me.owner,
  65             inputEl, value, calcWidth,
  66             result = [width, height];
  67
  68         if (owner.grow) {
  69             inputEl = owner.inputEl;
  70
  71             // Find the width that contains the whole text value
  72             value = (inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '') + owner.growAppend;
  73             calcWidth = inputEl.getTextWidth(value) + inputEl.getBorderWidth("lr") + inputEl.getPadding("lr");
  74
  75             // Constrain
  76             result[0] = Ext.Number.constrain(calcWidth, owner.growMin,
  77                     Math.max(owner.growMin, Math.min(owner.growMax, Ext.isNumber(width) ? width : Infinity)));
  78         }
  79
  80         return result;
  81     }
  82
  83 });
  84