Last active
July 16, 2020 22:04
-
-
Save jratcliff/20cd147389a29da5ef569eae6029c52e to your computer and use it in GitHub Desktop.
TextField override that makes sure the emptyText displays when grow: true is used on a field
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ext.define(null, { | |
override: 'Ext.form.field.Text', | |
/** | |
* Override that makes sure to display the emptyText | |
* and adds the padding and margin of the inputEl | |
*/ | |
autoSize: function () { | |
var me = this, | |
triggers, triggerId, triggerWidth, inputEl, width, value; | |
if (me.grow && me.rendered && me.getSizeModel().width.auto) { | |
inputEl = me.inputEl; | |
triggers = me.getTriggers(); | |
triggerWidth = 0; | |
value = Ext.util.Format.htmlEncode( | |
// OVERRIDE start | |
// me.getGrowWidth() || (me.hasFocus ? '' : me.emptyText) || '' | |
me.getGrowWidth() || me.emptyText | |
// OVERRIDE end | |
); | |
// Translate spaces to non-breaking spaces | |
value = value.replace(/\s/g, ' '); | |
for (triggerId in triggers) { | |
if (Object.prototype.hasOwnProperty.call(triggers, triggerId)) { | |
triggerWidth += triggers[triggerId].el.getWidth(); | |
} | |
} | |
width = inputEl.getTextWidth(value) + triggerWidth + | |
// The element that has the border depends on theme - inputWrap (classic) | |
// or triggerWrap (neptune) | |
me.inputWrap.getBorderWidth('lr') + me.triggerWrap.getBorderWidth('lr') + | |
inputEl.getPadding('lr'); | |
// OVERRIDE start - adds in the inputEl's left/right margin | |
width = width + inputEl.getMargin('lr'); | |
// OVERRIDE end | |
width = Math.min(Math.max(width, me.growMin), me.growMax); | |
me.bodyEl.setWidth(width); | |
me.updateLayout(); | |
me.fireEvent('autosize', me, width); | |
} | |
}, | |
/** | |
* Override that returns either the current input value or the value of this.emptyText | |
* based on which string is the longest. This will then make the autoSize method will | |
* keep an input field at least as wide as the empty text is. | |
*/ | |
getGrowWidth: function() { | |
var val = this.inputEl.dom.value; | |
// OVERRIDE - BEGIN | |
// this.inputEl.dom.value; | |
return val.length < this.emptyText.length ? this.emptyText : val; | |
// OVERRIDE - END | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment