Sencha Touch 2 Add and Remove textfield inside fieldset

Question

i have strange issue with removing item from fieldset. my app success adding new textfield fieldset item, buth when i do remove() my app screen got stuck without any error on my google chrome. here my source view js

Ext.define('qms.view.QC23', {
    extend: 'Ext.form.FormPanel',
    alias: 'widget.QC23View',
    id: 'QC23View',
    requires: ['Ext.form.FieldSet', 'Ext.Label'],
    config: {
        items: [
{
                        xtype: 'fieldset',
                        //defaults: { labelAlign: 'top' },
                        Id:'defectAdd',
                        layout:{

                        },
                        items: [
                            {
                                xtype: 'button',
                                text: 'New Defect',
                                id: 'DefectQC23Button',
                                ui: 'action'
                            },
                            {
                                xtype: 'button',
                                text: 'Remove Defect',
                                id: 'RemoveQC23Button',
                                ui: 'action'
                            }
                        ]
                    }
]
}

and my controler

Ext.define('qms.controller.QC23con', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            addDefectButton:'#DefectQC23Button',
            rmDefectButton:'#RemoveQC23Button'

        },
        control: {
            addDefectButton:{
                tap: 'addDefect'
            },
            rmDefectButton:{
                tap: 'removeDefect'
            },
        }
    },
    addDefect: function(button){        
        button.up('fieldset').add({
        xtype: 'textfield',
        name: 'MyField-' + button.up('fieldset').length
        });
        //Ext.getCmp('defectAdd').doLayout();
    },
    removeDefect: function(button){
        button.up('fieldset').remove(button.up('fieldset').items.items[0]);
    }

the function for adding item work fine, but when i remove the item my screen stuck. i am using google chrome for testing.

please give me solution for this issue. thanks.

Answer 1

I noticed you are not checking for the xtype before removing an item from the fieldset. The code might be removing the button itself in which case it might cause your screen to freeze. I created a simple sencha fiddle https://fiddle.sencha.com/#fiddle/4tf that does what you are trying to accomplish.

replace the removeDefect function with this:

var lastItem = button.up('fieldset').items.items.length-1;
if(button.up('fieldset').items.items[lastItem].xtype ==='textfield')
    button.up('fieldset').remove(button.up('fieldset').items.items[lastItem]);