2013-02-06 26 views
1

我想在extjs 4中點擊按鈕時動態地添加一個字段。我所做的是在添加按鈕上添加onchange函數,並在該函數中添加添加文本字段邏輯。 這是我的代碼。在extjs中點擊按鈕添加dynmic字段4

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); 
    } 
}); 

而且我也希望,在這個表格的編輯我將數據加載到我已新動態創建這些新的領域。

回答

3

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方法。

看到JSFiddle

+0

@anupkumar是啊,有是爲向上導航一個錯字。請參閱我的編輯和工作示例 – sra

+0

感謝它適用於我。 – anupkumar

+0

我可以在extjs中對組合框的更改做同樣的事情嗎? – anupkumar