Extjs 4：单击按钮将动态字段添加到表单

【问题标题】：Extjs 4 : Adding dynamic fields to form on click of buttonExtjs 4：单击按钮将动态字段添加到表单
【发布时间】：2016-05-07 10:09:03
【问题描述】：

我有一个包含项目和按钮“添加”的表单，用于向表单动态添加字段（复制第一个字段）。链接到按钮的功能是什么这是我的代码：

     var form new Ext.form.FormPanel({
            items           : [{
                xtype: 'fieldcontainer',
                combineErrors: true,
                msgTarget : 'side',
                layout: 'hbox',
                items: [{
                    xtype       : 'displayfield',
                    margin      : '0 10 0 0'
                },{
                    xtype       : 'button',
                    text        : 'select'
                }]
            }]
            ,buttons: [{
              text    : 'Add field'
            }]
        })

【问题讨论】：

标签： javascript extjs4 formpanel

【解决方案1】：

我认为你应该在按钮上定义点击功能（或者给按钮一个 itemId 并在控制器中定义一个函数，在那里你可以访问表单对象项目数组并添加一个动态的“fieldcontainer”对象到表单。请参阅下面的 sn-p ：

在视图中：

,buttons: [{
          text    : 'Add field',
          itemId : 'addField'
        }

在控制器中：

refs : [{
    selector : 'viewport form',
    ref : 'myForm'
},
init : function(){
    this.control({
        '#addField':{
            click : this.addFieldContainer
        }
        });

},

addFieldContainer: function(){
var form = this.getMyForm();
form.items.push({
            xtype: 'fieldcontainer',
            combineErrors: true,
            msgTarget : 'side',
            layout: 'hbox',
            items: [{
                xtype       : 'displayfield',
                margin      : '0 10 0 0'
            },{
                xtype       : 'button',
                text        : 'select'
            }]
        });

}

希望这会有所帮助。

【讨论】：