View Full Version : Extending TriggerField

20 May 2009, 5:11 AM
I have a need to extend TriggerField and maintain its value in a custom manner. Specifically, I need the stored/submitted value to be an object containing an encoded object with a bit more information than what is displayed in the triggerfield.

So I figured I'd add a hidden field to keep the complex true value. But the bolded code below causes IE7/IE8 to error in DomHelper's overwrite function:
el.innerHTML = createHtml(o)

After doing a little research, IE7 (and IE8 didn't fix it!) has a bug when you try to set innerHTML of a SELECT field. I didn't look at triggerfield yet to see that it is a select field, but I'm reasonably sure it is.

So what's the workaround?

Ext.ux.form.SectionPickerField = Ext.extend(Ext.form.TriggerField, {
initComponent: function() {
var me = this;
me.extid = Ext.id();
me.id = me.extid;
me.triggerConfig = { tag: 'button', html: 'Choose Section...', cls: 'pwp-choose-section-button' };
focus: function() {
onRender: function(ct, position) {
Ext.ux.form.SectionPickerField.superclass.onRender.call(this, ct, position);
tag: 'input',
type: 'hidden',
id: 'hidden-'+this.initialConfig.name,
name: this.initialConfig.name
setValue: function(v) {
if (!Ext.isObject(v)) {
v = Ext.decode(v);
Ext.ux.form.SectionPickerField.superclass.setValue.call(this, v.name);
v = Ext.encode(v);
var el = Ext.get('hidden-'+this.initialConfig.name);
el.dom.value = v;
getValue: function() {
var el = Ext.get('hidden-'+this.initialConfig.name);
return el.dom.value;

20 May 2009, 5:54 AM
The convention Jack chose was to use the config hiddenName to denote the name of the hidden field to hold an underlying value.

See ComboBox. It does this.

20 May 2009, 6:33 AM
Regardless of the name of hidden field, there's a bug in IE and my code (and Ext's) is triggering it.


20 May 2009, 6:43 AM
It's not a select field! You can type into it. It's a plain old <input>

20 May 2009, 6:44 AM
You are asking to put an <input> inside an <input>!