CODEWITHSUNDEEP
javascriptextjs
zedascouves
zedascouves

Reputation: 35

How to remove label after removing a component?

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();
            }
        }
    });

Upvotes: 0

Views: 1758

Answers (2)

JamesHalsall
JamesHalsall

Reputation: 13505

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

Upvotes: 1

Stefan
Stefan

Reputation: 4160

I don't know extjs, but, normally, how would you do this (and how you should do this) is by simply adding the input and its label in a or and then, when you want to remove the input (and its label in the same time), just do:

obj = document.getElementById( ID-OF-ELEMENT )
obj.parentNode.html = '';

or just delete its parent in any other way you might find to not have empty spans lying around:

obj.parentNode.parentNode.removeChild( obj.parentNode );

or, if you know that the label is just before the input, you can just do:

obj.parentNode.removeChild( obj.previousSibling );

or just combine them to suit your purpose

Upvotes: 0

Related Questions