SENCHA :How to add/remove text fields dynamically by clicking ADD / DELETE buttons in SENCHA touch

Question

I have implemented a function using Sencha touch.

In that i have designed a view with 2 buttons ADD, DELETE in a file in VIEW.

AQnd add corresponding controllers for the button in CONTROLLER file

controller works fine for console out put

But i need to add any one form like textfield or text area of field set, by taping on ADD button dynamically

Delete one form when tap DELETE button dynamically.

View File:

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 file:

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

                        }
                        },
        });
    },

Output:

Answer 1

This sounds like almost exactly what you're trying to do: http://www.swarmonline.com/2011/05/dynamic-sencha-touch-forms-part-3-adding-form-fields-on-the-fly/

However, it's written for Sencha Touch 1.0, so the solution is slightly different for 2.0...

First, place your button in a fieldset:

View File

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

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

Now you can access the field set from the button tap handler and add fields. Remember to add your button as an argument to the handler.

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

You can also add other options such as placeholder to your field config.

EDIT:

Likewise, to remove fields, simply use the remove method instead (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