Dynamically add Text Fields to a Panel in extjs - json

Question

I have a Panel where in I wish to add two text fields in 'hbox' layout for every entry in the json data.
For e.g. : Suppose I have a json like this:
{
..
ids : [
{
'name' : 'first name',
'surname' : 'first surname',
},
{
'name' : 'second name',
'surname' : 'second surname'
}
]
}
In this example the panel will consist of two rows of two textfields each with the labels being 'name' and 'surname'
So in the for loop I need to know how to insert the two textfields in 'hbox' layout inside the Panel. Had it been a grid it would be easy to add to the store.
Here's what I have done.
Ext.getCmp('panelid').items.add(Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10',
height: 100
},
items: [
{
fieldLabel: 'Name',
id: 'idFieldName',
name : 'Data',
margin:'0 10 10 0',
width:225,
labelWidth: 40
},
{
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType',
margin: '0 10 10 0',
width:225,
labelWidth:55
}
]
}));
EDIT1: Added my progress.
EDIT2: I have found half the solution to the problem. The problem was that I don't need to add to the items but rather I can just add to the panel itself. So this is working :
Ext.getCmp('panelid').add(....)
But now the issue is that in the second iteration of the loop the next hbox formatted text fields come on TOP of the existing ones, i.e., instead of adding a row below this line is adding on top of the panel. Kindly advise how to get rid of this issue.
EDIT 3:
I have found the solution as to why it was adding elements on top of the existing ones. It's because whenever I was adding elements in the loop the id of the added elements was same. So in effect it was replacing the two textfields I had already put in the previous iteration.
So, I have just altered the id name as follows:
id: 'idFieldName' + i

Answer 1

I think you should use the "form" layout instead (or an Ext.form.Panel), and use a Ext.form.FieldContainer to group your 2 text field.
Example :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'first line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
},
{
xtype: 'fieldcontainer',
fieldLabel: 'second line',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
}
]
});
If you want to do it dynamically you can do :
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
addRow : function(rowLabel) {
this.add({
xtype: 'fieldcontainer',
fieldLabel: rowLabel,
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'textfield',
flex: 1
}]
});
}
});
and then in your loop you can use :
myPanel.addRow('test');

Answer 2

You should use different names for each field too, to be able to retrieve the form values later.
name: 'Data' + i
EDIT
Besides, I would use itemId instead of id, as stated here: https://stackoverflow.com/a/18472598/2085604
You can then use Ext.ComponentQuery.query(..) to get components by their itemId:
https://stackoverflow.com/a/24407896/2085604

Answer 3

What version of ExtJS are you using for this example? 3, 4 or 5? I ask this because changes the solution of your problem (more or less) depending on the version.
EDIT
Seems that you found a solution. I don't know if you are doing this in the view, but if that's the case, you should use a controller linked to that particular view. In this way your code will look better, more clear and another important reason, the following versions of ExtJS(5), use this kind of structure.