无法设置文本字段的值，因为它不在范围内

Question

我有一个面板，其中标题中有一个按钮，可以帮助我在该面板中添加两个文本字段。现在，当我单击此按钮时，它会将我带到一个弹出表单，用户在其中输入所需的两个文本字段的值，然后单击此弹出面板标题中的保存按钮。

添加了两个文本字段，但值未设置为在弹出表单中输入的值。我认为问题在于范围。请查看以下代码并告诉我如何解决此问题。

                    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

这里有几件事可以帮助您，但首先是不要费心跟踪组件中的唯一 ID。让 ExtJS 为您处理。此外，删除嵌套处理程序将使您的代码更易于阅读。我将this fiddle 放在一起，展示了您如何做到这一点。

通过不使用 ID，您可以使用类似于 saveBtn.up('panel') 的向上/向下选择器获取对父/子组件的引用。

您还可以在弹出窗口中添加一个表单以便于选择。希望这有助于让您了解利用该框架的更好方法。