0

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

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

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

控制器适用于控制台输出

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

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

查看文件：

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

                        }
                        },
        });
    },

输出：在此处输入图像描述

4

1 回答 1

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
于 2012-08-01T13:35:14.370 回答