Display value of textfield in displayfield

Question

I have a text field and a displayfield. I want the user value of the text field to displayed in the display field. how do i do that?

My code is as follows:

{
    xtype: 'textfield',
    fieldLabel: 'Textfield',
    allowblank: false            
}, {
    xtype: 'displayfield',
    fieldLabel: 'Textfield Value',
    value: 'textfieldValue'
}

@Sandy.Arv could you please explain me how? i am new to extjs and programming.. ur help would be aprreciated — , May 24 '17 at 10:59
Dont you have a viewmodel? No need of a listener. Directly bind same value to both. — Harshit Shah, May 24 '17 at 11:02
You can use extjs model/databinding without any listener(just like angularjs) — Tejas, May 24 '17 at 14:40

score 4 · Answer 1 · answered May 24 '17 at 11:10

The fastest implementation would be a listener on the textfield:

listeners: {
    change: function(field, newValue) {
        field.nextSibling().setValue(newValue)
    }
}

Or you use a viewModel on the parent container and bind the value, this improves reusability:

xtype:'panel',
viewModel:{
},
items:[{
    xtype: 'textfield',
    fieldLabel: 'Textfield',
    allowBlank: false,
    bind: {
        value: '{value}'
    }
},{
    xtype: 'displayfield',
    fieldLabel: 'Textfield Value',
    bind: {
        value: '{value}'
    }
}]

A fiddle with both implementations: https://fiddle.sencha.com/#view/editor&fiddle/206o

Display value of textfield in displayfield

1 Answers1