Extjs - textlabel value change on hidden field content

Question

I'm trying to change the value of a displayfield inside a form acording to a value on another field (hidden).

The hidden field retrives it's value from mapping and the displayfield will also retrive content from mapping, but from two diferent values (mapping1, mapping2) acording to the hidden value. This is what I'm trying to do :

mapping: ['myHidden''mapping1','mapping2'],
form: [{
    fieldLabel: 'myHidden',
    xtype: 'hidden',
    name: 'myHidden',
    listeners: {
          'change': function(){
                   if(this.getValue=='X'){
                         this.up('form').findfield('myText').setName('mapping1');
                   }
                   else{
                         this.up('form').findfield('myText').setName('mapping2');
                    }
                }
            }
    },{
        fieldLabel: 'myText', 
        xtype: 'displayfield'
    }]      

As I undestand the mapping to 'myText' is given by the name tag, but since I wan't to change it's value How should I do it?

I just want to change the mapping of 'myText' on form load based on the value that I'm getting from server trough 'myHidden' field.

thank you for you help.

Answer 1

I've been able to get the first example to work as I wanted. I don't know if it is the best solution but I'll place it here so you can use it if you're facing the same problem.

Basically I've mapped the values to hidden fields and then I change the content of the displayfield according to the value on myHidden

mapping: ['myHidden''mapping1','mapping2'],
form: [{
    fieldLabel: 'mapping1',
    xtype: 'hidden',
    id: 'mapping1',
},{
    fieldLabel: 'mapping2',
    xtype: 'hidden',
    id: 'mapping2',
},{
    fieldLabel: 'myHidden',
    xtype: 'hidden',
    name: 'myHidden',
    listeners: {
          'change': function(){
                   if(this.getValue=='X'){
                         Ext.getCmp('myText').setValue(Ext.getCmp('mapping1').getValue());
                   }
                   else{
                         Ext.getCmp('myText').setValue(Ext.getCmp('mapping2').getValue());
                    }
                }
            }
    },{
        fieldLabel: 'myText', 
        xtype: 'displayfield',
        id: 'myText'
    }]    

Answer 2

You are defining a function to a crucial config for the textfield (name). Why would you do such a thing?
Alright back to my answer..

At what point do you want your textfield value to change? When the hiddenfield gets a value? This code will work for you:

{
  xtype: 'hidden',
  id: 'myHidden',//Do you really want an id?
  name: 'myHidden',
  listeners: {
    change: function(){
        //this piece of code changes the textfield to the same value as the hidden field when the hidden field value changes.
        this.up('form').findfield('myTextField').setValue(this.getValue());
    }
  }
},{
  fieldLabel: 'myText', 
  xtype: 'displayfield',        
  name: 'myTextField'
}

---

The best way to solve this problem IMO is to create a container with a hiddenfield and a field in it. This way the hiddenfield value will gets posted by the form and not the value from the other field. You will get something like this:

Ext.define('LookupField', {
    extend: 'Ext.container.Container',
    alias: 'widget.lookupfield',

    constructor: function (config) {
        var me = this;
        var hiddenFieldName = me.name;
        var triggerFieldName = "Display" + me.name;

        me.hiddenField = Ext.create('Ext.form.field.Hidden', {
            name: hiddenFieldName,
            hidden: true
        });

        me.triggerField = Ext.create('Ext.form.field.Trigger', {
            name: triggerFieldName,
            triggerCls: 'x-form-search-trigger',
            editable: false,
            submitValue: false,
            enableKeyEvents: true,
            onTriggerClick: function () {
            }//eo onTriggerClick
        });
        //Add config to the triggerfield
        Ext.applyIf(me.triggerField, config);
        //Add the hiddenfield and triggerfield to the container
        me.items = [me.hiddenField, me.triggerField];
        me.callParent(arguments);
    }//eo initComponent
});