Validating Dynamically-added TextFields in Columns

[Netarious]

I am trying to collect up to nine names including Title, FirstName, MiddleName and LastName.

The way I have implemented this is by rendering the TextFields in columns thus:


fs.column({
id: 'columnTitle',
width:60,
labelAlign: 'top'
},
new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title_1',
width: 50,
tabIndex: 4
})
);

fs.column({
id: 'columnFirstName',
width:110,
labelAlign: 'top'
},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'firstName_1',
width: 100,
tabIndex: 5
})
);

fs.column({
id: 'columnMiddleName',
width:110,
labelAlign: 'top'
},
new Ext.form.TextField({
fieldLabel: 'Middle Name',
name: 'middleName_1',
width: 100,
tabIndex: 6
})
);

fs.column({
id: 'columnLastName',
width:180,
labelAlign: 'top'
},
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'lastName_1',
width: 150,
tabIndex: 7,
allowBlank: false
})
);

fs.column({
id: 'actionButton',
width: 20
}
);

When the user clicks the "actionButton", I am dynamically adding a new set of TextFields to the columns using this function:


function addNewClientRow()
{

if (clientIndex==9) return;

clientIndex++;

var t = new Ext.form.TextField({
name: 'title_' + clientIndex,
width: 50,
style: 'margin-bottom: 8px;',
tabIndex: clientIndex*4
});
t.render('columnTitle');

t = new Ext.form.TextField({
name: 'firstName_' + clientIndex,
width: 100,
style: 'margin-bottom: 8px;',
tabIndex: clientIndex*4+1
});
t.render('columnFirstName');

t = new Ext.form.TextField({
name: 'middleName_' + clientIndex,
width: 100,
style: 'margin-bottom: 8px;',
tabIndex: clientIndex*4+2
});
t.render('columnMiddleName');

t = new Ext.form.TextField({
name: 'lastName_' + clientIndex,
width: 150,
style: 'margin-bottom: 8px;',
tabIndex: clientIndex*4+3,
allowBlank: false
});
t.render('columnLastName');

var addClientButton = Ext.get('addNewClientButton');

if (clientIndex==9){
addClientButton.setStyle('display', 'none');
}else{
addClientButton.setStyle('margin-top', (clientIndex*31-10) + 'px');
}
}

This all works fine. However, the surname is a required field. When the first new row loses focus from the surname field, the validator highlights the field, but the alert icon doesn't appear and I get a javascript error:

"_f has no properties"

Essentially the command


var _f=this.el.findParent(".x-form-element",5,true); is not finding the required element.

Does anyone have any ideas on how I can fix this issue. From searching through the forums it seems I need to make sure the new element is a child of an element with the x-form-element class. I think its something to do with adding the control to the column but not making it a "child" as it were. Very confused!

[Netarious]

I figured out the solution by inspecting the generated DOM. Adding the new field to the column didn't generate the required div that the validator required to place the alert image.

I changed the add new row function to generate this div using a template and appended the new textfield to that div instead.

Here's the new function:


function addNewClientRow()
{

if (clientIndex==9) return;

clientIndex++;

var t = new Ext.Template(
'<div id="x-form-el-{fieldname}" class="x-form-element" style="padding-left: 0pt;"></div>'
);

var inputField = Ext.get('title_1');
var parentDiv = inputField.dom.parentNode.parentNode;
t.append(parentDiv, {fieldname: 'title_' + clientIndex});
var tf = new Ext.form.TextField({
id: 'title_' + clientIndex,
name: 'title_' + clientIndex,
width: 50,
style: 'margin-bottom: 4px;',
tabIndex: clientIndex*4
});
tf.render('x-form-el-title_' + clientIndex);

inputField = Ext.get('firstName_1');
parentDiv = inputField.dom.parentNode.parentNode;
t.append(parentDiv, {fieldname: 'firstName_' + clientIndex});
tf = new Ext.form.TextField({
id: 'firstName_' + clientIndex,
name: 'firstName_' + clientIndex,
width: 100,
style: 'margin-bottom: 4px;',
tabIndex: clientIndex*4+1
});
tf.render('x-form-el-firstName_' + clientIndex);

inputField = Ext.get('middleName_1');
parentDiv = inputField.dom.parentNode.parentNode;
t.append(parentDiv, {fieldname: 'middleName_' + clientIndex});
tf = new Ext.form.TextField({
id: 'middleName_' + clientIndex,
name: 'middleName_' + clientIndex,
width: 100,
style: 'margin-bottom: 4px;',
tabIndex: clientIndex*4+2
});
tf.render('x-form-el-middleName_' + clientIndex);

inputField = Ext.get('lastName_1');
parentDiv = inputField.dom.parentNode.parentNode;
t.append(parentDiv, {fieldname: 'lastName_' + clientIndex});
tf = new Ext.form.TextField({
id: 'lastName_' + clientIndex,
name: 'lastName_' + clientIndex,
width: 150,
style: 'margin-bottom: 4px;',
tabIndex: clientIndex*4+3,
allowBlank: false
});
tf.render('x-form-el-lastName_' + clientIndex);

var addClientButton = Ext.get('addNewClientButton');

if (clientIndex==9){
addClientButton.setStyle('display', 'none');
}else{
addClientButton.setStyle('margin-top', (clientIndex*31-8) + 'px');
}
}