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
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
}
]
}
]
}