PDA

View Full Version : fieldSet dosent remove elements correctly



genTaliaru
30 May 2012, 9:11 AM
var fs = $E("fsObjectModuleSettings"); //fieldset
fs.add(
{
fieldLabel: tra("event_date"),
emptyText: tra("insert_date"),
xtype: "datefield",
width: 100,
allowBlank: false,
id: "eventDate",
name: 'eventDate'
})
fs.setVisible(true);
fs.doLayout(false,true);

now is this field eventDate has error. and then


var fs = $E("fsObjectModuleSettings");
fs.items.each(function(item) {
item.clearInvalid();
})
fs.removeAll(true);
fs.doLayout(true, true);

gives error Element.alignToXY with an element that doesn't exist

sword-it
1 Jun 2012, 7:10 AM
Hi,

We need more code of your code for solution. I think that your errors caused of other things.

Thanks

genTaliaru
1 Jun 2012, 10:15 AM
Yuu can try similar code in http://dev.sencha.com/deploy/ext-3.3.1/examples/form/dynamic.html browser console, firebug or google chrome
First run this in console

var fs = Ext.getCmp("ext-comp-1017"); //fieldsetfs.add(
{
fieldLabel: "eventDate",
emptyText: "insert_date",
xtype: "datefield",
width: 100,
allowBlank: false,
id: "eventDate",
name: 'eventDate'
})
fs.setVisible(true);
fs.doLayout(false,true);
Then focus the eventDate fiel and then blur the input, then the input gets a error status
then run the following code in console.

var fs = Ext.getCmp("ext-comp-1017");
fs.items.each(function(item) {
item.clearInvalid();
})
fs.removeAll(true);
fs.doLayout(true, true);
Then comes the same error "Element.alignToXY with an element that doesn't exist""
35849

julio.batista
5 Jun 2012, 3:15 AM
Your example works, just remove the last doLayout call.

Try this


var fs = Ext.getCmp("ext-comp=1017");
fs.add({
fieldLabel : "eventDate"
,emptyText : "insert_date"
,xtype : "datefield"
,width : 100
,allowBlank : false
,id : "eventDate"
,name : "eventDate"
});

fs.setVisible(true);
fs.doLayout(false, true);

focus and blur the field


fs.items.each(function(item)
{
item.clearInvalid();
});
fs.removeAll(true);

genTaliaru
5 Jun 2012, 3:18 AM
ok this works, but later if i add another fields, then i must call the doLayout
and then the error stills pops up

sword-it
5 Jun 2012, 4:20 AM
First of all, I should say that we couldn't find solution without your code examples.I didnt reproduce error in my environment because i didnt define message target!


Ext.form.Field.prototype.msgTarget = 'side';

Anyway, the problem is causing of firing 'afterlayout' & 'expand' event of field component after its destroyed. You should change Ext js lib code (or override) for solution:

In the Ext.form.MessageTargets object of the class Ext.Form.Field:


'side' : {
mark: function(field, msg){
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();

if(!elp){
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
if (field.ownerCt) {
field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
field.ownerCt.on('expand', field.alignErrorIcon, field);
}
field.on('resize', field.alignErrorIcon, field);
field.on('destroy', function(){
Ext.destroy(this.errorIcon);
}, field);
}
field.alignErrorIcon();
field.errorIcon.dom.qtip = msg;
field.errorIcon.dom.qclass = 'x-form-invalid-tip';
field.errorIcon.show();
},
clear: function(field){
field.el.removeClass(field.invalidClass);
if(field.errorIcon){
field.errorIcon.dom.qtip = '';
field.errorIcon.hide();
}else{
field.el.dom.title = '';
}
}
}



You should use 'mon' , and you should change these lines like this:



field.mon(field.ownerCt,'afterlayout', field.alignErrorIcon, field);
field.mon(field.ownerCt,'expand', field.alignErrorIcon, field);