Unable to set value of a textfield because its not in scope - button

Question

I have a panel where in I have a button in the header which helps me to add two textfields in that panel. Now when I click on this button it takes me to a popup form where the user enters the value of the two textfields it wants and then clicks on save button in the header of this popup panel.
The two textfields are added but the value is not set to the value which is entered in the popup form. I think the problem is with the scope. Kindly look at the following code and tell me how to resolve this issue.
xtype: "panel",
id: 'idFieldpanel',
...
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add',
handler: function(){
var addidFieldPanel= new Ext.form.Panel({
id: 'newidFieldPanel',
width: 250,
height: 100,
floating: true,
closable : true,
layout : {
type : 'vbox',
align : 'stretch'
},
bodyPadding: 10,
items : [
{
xtype : 'textfield',
id : 'newidFieldname',
fieldLabel : 'Name',
name : 'newidFieldname',
flex : 1,
scope : this
},
{
xtype : 'textfield',
id : 'newidFielddataType',
fieldLabel : 'DataType',
name : 'newidFielddataType',
flex : 1,
scope : this
}
],
header : {
titlePosition : 1,
items : [{
xtype: 'button',
text: 'Save',
handler: function() {
ctr++; //this is used so that the id of the added fields do not match and hence they do not overlap
Ext.getCmp('idFieldpanel').add({
xtype:"container",
layout : {
type : 'hbox',
align : 'stretch'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10'
},
items: [
{
xtype : 'textfield',
fieldLabel: 'Name',
id: 'idFieldName' + ctr,
name : 'Data',
margin:'0 10 10 0',
flex : 1,
height : 'auto'
},
{
xtype : 'textfield',
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType' + ctr,
margin: '0 10 10 0',
flex : 1,
height : 'auto'
}
]
});
Ext.getCmp('idFieldName' + ctr).setValue(Ext.getCmp('newidFieldname').getValue());
Ext.getCmp('idFielddataType' + ctr).setValue(Ext.getCmp('newidFielddataType').getValue());
}
}]
}
})
addidFieldPanel.show();
}
}]
}

Answer 1

There are a few things that can help you out here, but first would be to not bother with tracking unique ID's across your components. Let ExtJS handle that for you. Also, removing the nested handlers will make your code a lot easier to read. I put together this fiddle that shows how you can do that.
By not using ID's you can grab reference to parent/child components with the up/down selectors similar to saveBtn.up('panel').
You can also add a form to your popup for easier selecting. Hope this helps to give you an idea of a better way to leverage the framework.