PDA

View Full Version : FormPanel with duplicate field names



mohaaron
18 Jun 2009, 3:44 PM
Hello All,

I have a form panel with two fields, one a displayfield and one a textfield, that I want bound to the same database field. I just found that when I do this only the first field gets bound to the value. The second field is left empty.

The reason that I'm doing this is because I want some information to be shown in the Summary Panel that will always bee seen while moving through tabs.

Is there any way to get both fields bound to the data? I only want the text field to be sent with a submit if that helps.

Here is a bit of the code that I'm talking about. You can see that there are two Summary fields.


var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'left',
border: true,
items: [{
xtype: 'panel',
title: 'Summary',
layout: 'form',
height: 130,
items: [{
fieldLabel: 'NoteId',
name: 'NoteId',
xtype: 'displayfield'
}, {
fieldLabel: 'Summary',
name: 'Summary',
xtype: 'displayfield'
}]
}, {
xtype: 'tabpanel',
deferredRender: false, // Don't deferr render of tabs so that they are data bound on load.
activeTab: 0,
border: false,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
},
items: [ // Tab Panel
{
title: 'General',
layout: 'form',
defaultType: 'textfield',
items: [ // Tab: General Items
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}

mjlecomte
18 Jun 2009, 7:30 PM
How about setting a listener on the editable field and then update your display field from the handler for that listener? perhaps the change event

mjlecomte
18 Jun 2009, 7:34 PM
Actually you probably want the valid event.

mohaaron
19 Jun 2009, 8:20 AM
I had thought about naming the display fields something different so they are not bound and then manually calling setValue for them in the forms load event. I just think this is a short cut and manual work. Why doesn't the form just bind both fields?

mjlecomte: What do you mean by Valid event?

mjlecomte
19 Jun 2009, 10:43 AM
You could try below. Don't use alert() for debugging, I just did that for illustration.






var fp = new Ext.FormPanel({
renderTo: document.body,
width: 600,
height: 300,
items: [{
xtype: 'displayfield',
fieldLabel: 'Summary Display',
name: 'summary-display'
}, {
xtype: 'textfield',
fieldLabel: 'Summary',
name: 'summary',
value: 'Initial Value',
listeners: {
valid:{
fn: function(){
alert('inside valid listener pause for inspection');
var name = this.name+'-display';
var formPanel = this.findParentByType('form');
var form = formPanel.getForm();
form.setValues({
'summary-display': this.getValue()
});
}
}
}
}]
});
alert('pause for inspection - before first setValues');
fp.getForm().setValues({'summary': 'Value Changed 1'});
alert('pause for inspection - before second setValues');
fp.getForm().setValues([
{
id: 'summary',
value: 'Value Changed 2'
}
]);
alert('pause for inspection - after setValues');

mjlecomte
19 Jun 2009, 10:48 AM
Meh, I meant to update the listeners block to this, so it dynamically adjusts to whatever name is assigned.


listeners: {
valid:{
fn: function(){
alert('inside valid listener pause for inspection');
var name = this.name+'-display';
var formPanel = this.findParentByType('form');
var form = formPanel.getForm();
form.setValues([{
id: name,
value: this.getValue()
}]);
}
}
}