Question

通过删除字段集中的字段，不会删除其标签。我该如何删除它？我正在使用ExtJS 2.0.2。代码如下：

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

而不是在Ext.Element引用上调用remove，而是执行此操作：

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

编辑：这适用于表单字段组件，因为它删除了包含标签和组件的包装器div

Answer 2

我不知道extjs，但是，通常情况下，你如何做到这一点（以及你应该如何做到这一点）只需在输入中添加输入及其标签，然后当你想要删除输入时（和它的标签在同一时间），只是做：

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

或者只是以任何其他方式删除它的父级，你可能会发现它没有空的空间：

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

或者，如果你知道标签就在输入之前，你可以这样做：

obj.parentNode.removeChild( obj.previousSibling );

或者只是将它们组合起来以满足您的目的

删除组件后如何删除标签？

2 个答案: