Question

By removing a field in a fieldset, it’s label is not removed. How can I remove it? I’m using ExtJS 2.0.2. Code follows:

var predicateArguments= new Ext.form.FieldSet({
    id:'predicate_arguments',
    layout:'form',
    title:'Predicate Arguments',
    defaultType:'textfield',
    autoHeight:true,
    autoWidth:true,
    autoScroll:true,
    items:[
        {
            xtype:'textarea',
            id:'description',
            fieldLabel:'Description',
            name:'description',
            readOnly:true
        }
    ],
    buttons: [
        {text: 'Add',
         handler:function(){
            //this will submit  the form's fields
            predicatesForm.getForm().submit();
         }},
        {text: 'Reset Fields',
         handler:function(){
            //this will reset the form's fields
            predicatesForm.getForm().reset();
         }}
        ]
})

var predicatesForm = new Ext.FormPanel({
    id:'predicates-form',
    region:'center',
    split:true,
    labelAlign:'right',
    layout:'column',
    items:[availablePredicatesGrid, predicateArguments]
})

var dateField = {xtype:'datefield',
                fieldLabel:'Date',
                name:'date',
                id:'date_field'
}

var numberField = {xtype:'numberfield',
            fieldLabel:'Number',
            name:'number',
            id:'number_field'
}

//when a rule is clicked do the following...
    availablePredicatesGrid.getSelectionModel().on('rowselect', function(sm,_rowIndex,_rule){
        predicatesForm.getForm().loadRecord(_rule);
        var _ruleType= _rule.store.getAt(_rowIndex).get('type');

        //removes previous existing fields (but not labels!)
        predicateArguments.remove('date_field');
        predicateArguments.remove('number_field');

        //creates new fields according to the selected rule types
        for(i=0; i<_ruleType.length; i++){
            if(_ruleType[i]=='date'){
                predicateArguments.add(dateField);
                predicateArguments.doLayout();
            }
            else if(_ruleType[i]=='number'){
                predicateArguments.add(numberField);
                predicateArguments.doLayout();
            }
        }
    });

Answer 1

Instead of calling remove on your Ext.Element reference, do this instead:

Ext.getCmp('id_of_your_form_field').getEl().parent().parent().remove();

EDIT: this is intended for use on form field components, as it removes the wrapper div containing the label and the component