Solution to remove item invalidation in ext panel

 

EXT panel How to Remove invalid items

When removing an item using remove in form, the HTML label will be left. To solve this problem, I searched the internet.

Method:

// Solve the problem that fieldlabel cannot be deleted when a field is removed from form.
Ext. Override (ext. layout. formlayout ,{
Renderitem: function (C, position, target ){
If (C &&! C. rendered & C. isformfield & C. inputtype! = 'Hiden '){
VaR ARGs = [
C. ID, C. fieldlabel,
C. labelstyle | this. labelstyle | '',
This. elementstyle | '',
Typeof C. labelseparator = 'undefined '? This. labelseparator: C. labelseparator,
(C. itemcls | this. Container. itemcls | '') + (C. hidelabel? 'X-hide-label ':''),
C. clearcls | 'x-form-clear-left'
];
If (typeof position = 'number '){
Position = target. Dom. childnodes [position] | NULL;
}
If (position ){
C. formitem = This. fieldtpl. insertbefore (Position, argS, true );
} Else {
C. formitem = This. fieldtpl. append (target, argS, true );
}
C. Render ('x-form-el-'+ C. ID );
C. Container = C. formitem; // must set after render, because render sets it.
C. actionmode = 'Container ';
} Else {
Ext. layout. formlayout. superclass. renderitem. Apply (this, arguments );
}
}
});

 

In addition, add field dynamically:

After formpanel has been rendered, you cannot use form. Add to add rendering, even if dolayout ().

Bug.

Ext. getcmp (). Add and dolayout are successfully used, but the field cannot be found in form. Firebug found that no information is added to form items.

This field is successfully added after form. Items. Add (field) is used. Therefore, you must delete form. Items. Remove from form. Items. Remove.

RelatedCode:

FormThere is a fieldset, where several hidden panels are first positioned. Add the created fields to these panels and display them.

{
Xtype: 'fieldset ',
ID: 'propertyform ',
Layout: 'column ',
Labelwidth: 60,
Autoheight: True,
Title :' Item attribute ',
Items :[{
Columnwidth:. 5,
Layout: 'form ',
Hidden: True,
ID: 'container1'
},{
Columnwidth:. 5,
Layout: 'form ',
Hidden: True,
ID: 'container2'
},{
Columnwidth:. 5,
Layout: 'form ',
Hidden: True,
ID: 'Container'
},{
Columnwidth:. 5,
Layout: 'form ',
Hidden: True,
ID: 'container4'
}

]}

Delete:

Clearpropertyform: function (){
VaR P = "Container"
For (I = 1; I <= 10; I ++ ){
VaR pp = P + I;
If (ext. getcmp (PP). Items. length> 0 ){
This. Form. Remove ("item" + I );
Ext. getcmp (PP). Remove ("item" + I );
}
Ext. getcmp (PP). Hide ();

}
This. dolayout ();
Ext. getcmp ('propertyform'). Hide ();
},

Add:

VaR field = new Ext. Form. textfield ({
ID: "item" + I,
Fieldlabel: label,
Name: Name,
Value: label1 [1],
Anchor: '000000'
});
This. Form. Add (field );
Ext. getcmp (C + I). Show ();
Ext. getcmp (C + I). Add (field );

This. dolayout ();

Ext. getcmp ('propertyform'). Show ();