SENCHA：如何通过单击 SENCHA touch 中的添加/删除按钮动态添加/删除文本字段

Posted 2023-02-25

【中文标题】SENCHA：如何通过单击 SENCHA touch 中的添加/删除按钮动态添加/删除文本字段

【英文标题】：SENCHA :How to add/remove text fields dynamically by clicking ADD / DELETE buttons in SENCHA touch

【发布时间】：2012-08-01 11:17:53

【问题描述】：

我已经使用 Sencha touch 实现了一个功能。

我在 VIEW 的文件中设计了一个带有 2 个按钮 添加、删除 的视图。

AQnd在CONTROLLER文件中为按钮添加相应的控制器

控制器适用于控制台输出

但我需要通过动态点击添加按钮来添加任何一种表单，例如文本字段或字段集的文本区域

在动态点击DELETE按钮时删除一个表单。

查看文件：

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'
                   
                   ]
           );

控制器文件：

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

                        
                        ,
        );
    ,

输出：

【参考方案1】：

这听起来几乎就是你想要做的：http://www.swarmonline.com/2011/05/dynamic-sencha-touch-forms-part-3-adding-form-fields-on-the-fly/

但是，它是为 Sencha Touch 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-remove)：

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