Question

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

因为我在VIEW文件中设计了一个带有2个按钮 ADD，DELETE 的视图。

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

控制器适用于控制台输出

但我需要添加任何一种表单，例如字段集的文本字段或文本区域，通过动态点击 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'
                   }
                   ]
           }});

enter image description here

控制器文件：

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

                        }
                        },
        });
    },

输出： enter image description here

Answer 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

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

1 个答案: