在ExtJS4中单击按钮添加动态字段

在ExtJS4中单击按钮添加动态字段,extjs,extjs4,extjs-mvc,Extjs,Extjs4,Extjs Mvc,我想在ExtJS4中单击按钮时动态添加一个字段。我所做的是在add按钮上添加一个onchange函数,并在该函数中编写adding textfield逻辑。 这是我的密码 Ext.define('AM.view.user.Edit', { extend: 'Ext.window.Window', alias : 'widget.useredit', requires: ['Ext.form.Panel'], title : 'Edit User', lay

我想在ExtJS4中单击按钮时动态添加一个字段。我所做的是在add按钮上添加一个onchange函数,并在该函数中编写adding textfield逻辑。 这是我的密码

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',
    requires: ['Ext.form.Panel'],
    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
    height: 300,
    width: 280,
    id : 'mainPanel',
        initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                id: 'dyForm',
                padding: '5 5 0 5',
                border: false,
                style: 'background-color: #fff;',

                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
           {
                text: 'Add',
                scope: this,
                handler: this.onChange
            },
           ];

        this.callParent(arguments);
    },
    onChange : function(){alert('test');
         var form=Ext.getCmp("mainPanel");
        form.items.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
        form.doLayout(true);
   }
});

我还希望在编辑此表单时,我会将数据加载到我新动态创建的新字段中。

onChange
函数更改为

onChange : function(btn){
    // var form=Ext.getCmp("mainPanel");
    var form = btn.up('window').down('form'); // this is a better approach
    form.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
}
我应该这样做。您将该字段直接添加到集合中,您应该在其中使用表单组件提供的
add
方法


请参见将
onChange
功能更改为

onChange : function(btn){
    // var form=Ext.getCmp("mainPanel");
    var form = btn.up('window').down('form'); // this is a better approach
    form.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
}
我应该这样做。您将该字段直接添加到集合中,您应该在其中使用表单组件提供的
add
方法


请参见

@anupkumar是的,上行导航有一个输入错误。查看我的编辑和工作示例我可以对extjs中的combobox进行同样的更改吗?对于up和down方法,请参见+1@sra祝贺您本周完成10公里比赛:)@anupkumar是的,请使用select事件。抱歉,我使用了select事件,但未获得它。。如何在里面创建表单元素,就像你为按钮“var form=btn.up('window').down('form');”所写的一样,@anupkumar是的,上面的导航有一个输入错误。查看我的编辑和工作示例我可以对extjs中的combobox进行同样的更改吗?对于up和down方法,请参见+1@sra祝贺您本周完成10公里比赛:)@anupkumar是的,请使用select事件。抱歉,我使用了select事件,但未获得它。。如何在其中创建表单元素,就像您为按钮“var form=btn.up('window')。down('form');”编写的那样进行选择