Display a text field multiple times in a form using extjs

Question

I have a requirement where in I have to display a particular value from a model more than once in a form. But when I try it, the form gets loaded only with the first reference being mapped and not the others.

Model code

        Ext.define('USOC',{
            extend: 'Ext.data.Model',
            fields: [
                {name: 'USOCCode', mapping: 'Detail > USOCCode'},
                'USOCCode',
                'TariffReference',
                'Telephone',
                'EffectiveDate',

Form Code

items: [{
                                                        columnWidth: 0.4,
                                                        margin: '3 0 0 10',
                                                        xtype: 'container',
                                                        layout:'anchor',
                                                        height: 280,
                                                        defaults: {
                                                            labelWidth: 150
                                                        },
                                                        defaultType: 'textfield',
                                                        items: [{
                                                        xtype: 'container',
                                                        layout: 'hbox'
                                                        },
                                                        {
                                                            xtype: 'fieldset',
                                                            title: 'Recurring Charge Footnote Key',
                                                            columnWidth:1.5,
                                                            layout: 'column',
                                                            defaultType: 'textfield',
                                                            width:1285,
                                                            //height:200,
                                                            defaults: {
                                                            labelWidth: 120,
                                                            margin: '3 0 0 40',
                                                            fieldStyle:"border:none 0px black",
                                                            readOnly: true
                                                            },
                                                            items: [{
                                                                fieldLabel: 'Universal Service Ordering Code',
                                                                name: 'USOCCode',
                                                                    width: 350,
                                                                    labelWidth: 180
                                                            },{
                                                                fieldLabel: 'Footnote Key',
                                                                name: 'FootnoteKey',
                                                                    width: 250
                                                            },{
                                                                fieldLabel: 'Description',
                                                                name: 'Description1',
                                                                    width: 500
                                                            }]
                                                        },
                                                        {
                                                            xtype: 'fieldset',
                                                            title: 'Non - Recurring Charge Footnote Key',
                                                            columnWidth:1.5,
                                                            layout: 'column',
                                                            defaultType: 'textfield',
                                                            width:1285,
                                                            //height:200,
                                                            defaults: {
                                                            labelWidth: 120,
                                                            margin: '3 0 0 40',
                                                            fieldStyle:"border:none 0px black",
                                                            readOnly: true
                                                            },
                                                            items: [{
                                                                fieldLabel: 'Universal Service Ordering Code',
                                                                name: 'USOCCode',
                                                                    width: 350,
                                                                    labelWidth: 180
                                                            },{
                                                                fieldLabel: 'Footnote Key',
                                                                name: 'FootnoteKey1',
                                                                    width: 250
                                                            },{
                                                                fieldLabel: 'Description',
                                                                name: 'Description2',
                                                                    width: 500
                                                            }]

As in code above I am trying to display USOCCode for fieldSet 'Recurring Charge Footnote Key' and 'Non - Recurring Charge Footnote Key'. But the value gets displayed only in the first reference and not the second one. I read on the API that the name has to be unique, but if I have to display it twice is there a workaround for the same??

Thanks in advance

Answer 1

Well I guess you will need a custom field to delegate the setting like

Ext.define('Ext.ux.form.field.Delegate',{
    extend: 'Ext.form.field.Hidden',
    alias: 'widget.delegatefield'

    width: 0,
    height: 0,
    setValue: function(val) {
        va me = this;
        me.setBoundFields(val);
        me.callParent();
    }
});

Which has a callback method as param that is called when the field get set. Below I've integrated it in your code

items: [
    {
        columnWidth: 0.4,
        margin: '3 0 0 10',
        xtype: 'container',
        layout:'anchor',
        height: 280,
        defaults: {
            labelWidth: 150
        },
        defaultType: 'textfield',
        items: [
            {
                xtype: 'container',
                layout: 'hbox'
            },
            {
                xtype: 'delegatefield',
                name: 'USOCCode',
                setBoundFields: function(val) {
                    var fields = Ext.ComponentQuery.query('[ident=USOCCode]'),
                        len = fields.length,
                        i = 0;
                    for(;i<len;i++) {
                        fields.setValue(val);
                    }
                }
            },
            {
                xtype: 'fieldset',
                title: 'Recurring Charge Footnote Key',
                columnWidth:1.5,
                layout: 'column',
                defaultType: 'textfield',
                width:1285,
                //height:200,
                defaults: {
                labelWidth: 120,
                margin: '3 0 0 40',
                fieldStyle:"border:none 0px black",
                readOnly: true
                },
                items: [
                    {
                        fieldLabel: 'Universal Service Ordering Code',
                        ident: 'USOCCode',
                        width: 350,
                        labelWidth: 180
                    },
                    {
                        fieldLabel: 'Footnote Key',
                        name: 'FootnoteKey',
                        width: 250
                    },
                    {
                        fieldLabel: 'Description',
                        name: 'Description1',
                        width: 500
                    }
                ]
            },
            {
                xtype: 'fieldset',
                title: 'Non - Recurring Charge Footnote Key',
                columnWidth:1.5,
                layout: 'column',
                defaultType: 'textfield',
                width:1285,
                //height:200,
                defaults: {
                    labelWidth: 120,
                    margin: '3 0 0 40',
                    fieldStyle:"border:none 0px black",
                    readOnly: true
                },
                items: [
                    {
                        fieldLabel: 'Universal Service Ordering Code',
                        ident: 'USOCCode',
                        width: 350,
                        labelWidth: 180
                    },{
                        fieldLabel: 'Footnote Key',
                        name: 'FootnoteKey1',
                        width: 250
                    },{
                        fieldLabel: 'Description',
                        name: 'Description2',
                        width: 500
                    }
                ]
            }
        ]
    }