SENCHA：如何通過單擊SENCHA touch中的ADD/DELETE按鈕動態地添加/刪除文本字段

Question

我已經使用Sencha touch實現了一個功能。

因爲我設計了一個帶有2個按鈕的視圖在VIEW中的文件中添加，刪除。

AQnd添加相應控制器在控制器的文件按鈕

控制器工作正常控制檯出把

，但我需要添加任何一種形式像場的文本框或文本區域設置，通過錄制ADD按鈕動態

刪除一個表格當點擊刪除按鈕動態。

查看文件：

Ext.define('MyApp.view.MainPanel', { 
      extend: 'Ext.form.Panel', 

      config: { 
      items: [ 
        { 
        xtype: 'button', 
        id: 'addButton', 
        height: 33, 
        left: '', 
        margin: '500px', 
        padding: '', 
        right: '400px', 
        ui: 'confirm-round', 
        width: 100, 
        text: 'Add' 
       }, 

        { 
        xtype: 'button', 
        id: 'deleteButton', 
        height: 33, 
        margin: '500px', 
        right: '296px', 
        ui: 'decline-round', 
        width: 100, 
        text: 'Delete' 
        } 
        ] 
      }}); 

Controller文件：

Ext.define('MyApp.controller.MainController', { 
    extend: 'Ext.app.Controller', 
    config: { 
     views: [ 
      'MainPanel' 
     ], 


    }, 

    init: function() { 
      this.control({ 

         '#addButton': { 
         tap: function() { 

         console.log('Add field'); 

         } 
         }, 


         '#deleteButton': { 
         tap: function() { 

         console.log('Delete field'); 

         } 
         }, 
     }); 
    }, 

輸出：

Answer 1

這聽起來像幾乎正是你想做什麼：http://www.swarmonline.com/2011/05/dynamic-sencha-touch-forms-part-3-adding-form-fields-on-the-fly/

然而，它是煎茶觸摸1.0編寫，因此該解決方案是2.0略有不同...

首先，把你的按鈕，在字段集：

查看文件

Ext.define('MyApp.view.MainPanel', { 
     extend: 'Ext.form.Panel', 

     config: { 
      items: [ 
       { 
      xtype: 'fieldset', 
        items: [ 
         /** your two button configs here **/ 
        ] 
       } 
     } 
}); 

現在，您可以訪問現場從按鈕自來水處理程序中設置並添加字段。請記住將您的按鈕作爲參數添加到處理程序。

tap: function(button){ 
    button.up('fieldset').add({ 
     xtype: 'textfield', 
     name: 'MyField-' + button.up('fieldset').length 
    }); 
} 

您還可以添加其他選項，如placeholder到你的領域配置。

編輯：

同樣地，爲了刪除字段，只需使用remove方法代替（http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-刪除）：

button.up('fieldset').remove(button.up('fieldset').items.items[0]); // remove 1st item