当使用add方法在formPanel中动态添加FieldSet时，尽管控件重绘正常，但form.isValid()只会返回true，打印form.items.length时也显示没有新的组件添加进来，但实际上无论render还是submit都是正常的，唯独validate不正常。问题代码如下：
Containers need to be aware of what they contain.
Most only need to know their
immediate children, and so their add method is sufficient.
However, for example a FormPanel, needs to know when Fields are added and removed at any depth in its Component tree so that it can update the Field Collection in its BasicForm.
There have been bug reports that after dynamic adding of
Containers to a FormPanel, or of Fields to nested Containers, the BasicForm does not know about those new fields to load.
So I propose two new template methods starting at the Component class level.
onAdd and
onRemove
"Template methods" might not be the best name because they don't bubble up the inheritance chain, they bubble up the
ownerCt chain.
so Container would have the following new code in red:
add : function(comp){
if(!this.items){
this.initItems();
}
var a = arguments, len = a.length;
if(len > 1){
for(var i = 0; i < len; i++) {
this.add(a[i]);
}
return;
}
var c = this.lookupComponent(this.applyDefaults(comp));
var pos = this.items.length;
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
this.items.add(c);
c.ownerCt = this;
this.onAdd(c);
this.fireEvent('add', this, c, pos);
}
return c;
},
insert : function(index, comp){
if(!this.items){
this.initItems();
}
var a = arguments, len = a.length;
if(len > 2){
for(var i = len-1; i >= 1; --i) {
this.insert(index, a[i]);
}
return;
}
var c = this.lookupComponent(this.applyDefaults(comp));
if(c.ownerCt == this && this.items.indexOf(c) < index){
--index;
}
if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
this.items.insert(index, c);
c.ownerCt = this;
this.onAdd(c);
this.fireEvent('add', this, c, index);
}
return c;
},
remove : function(comp, autoDestroy){
var c = this.getComponent(comp);
if(c && this.fireEvent('beforeremove', this, c) !== false){
this.items.remove(c);
delete c.ownerCt;
if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){
c.destroy();
}
if(this.layout && this.layout.activeItem == c){
delete this.layout.activeItem;
}
this.onRemove(c);
this.fireEvent('remove', this, c);
}
return c;
},
// private
// Inform all ancestor Containers of an addition to their Component tree
onAdd: function() {
if (this.ownerCt && this.ownerCt.onAdd) {
this.ownerCt.onAdd.apply(this.ownerCt, arguments)
}
},
// private
// Inform all ancestor Containers of a removal from their Component tree
onRemove: function() {
if (this.ownerCt && this.ownerCt.onRemove) {
this.ownerCt.onRemove.apply(this.ownerCt, arguments)
}
}
Then FormPanel would have
// Determine if a Component is usable as a form Field.
isField: function(c) {
return !!c.setValue && !!c.getValue && !!c.markInvalid && !!c.clearInvalid;
},
onAdd : function(c) {
Ext.form.FormPanel.superclass.onAdd.apply(this, arguments);
// If a single form Field, add it
if (this.isField(c)) {
this.form.add(c);
// If a Container, add any Fields it might contain
} else if (c.findBy) {
this.form.add.apply(this.form, c.findBy(this.isField));
}
},
onRemove : function(c) {
Ext.form.FormPanel.superclass.onRemove.apply(this, arguments);
// If a single form Field, remove it
if (this.isField(c)) {
Ext.destroy(c.container.up('.x-form-item'));
this.form.remove(c);
// If a Container, remove any Fields it might contain
} else if (c.findByType) {
Ext.each(c.findBy(this.isField), this.form.remove, this.form);
}
},
Untested code, but that's the principle.
You see that it uses find by type which uses
isXType which, as discusses on another thread gives up testing the inheritance chain for an xtype match as soon as it hits a constructor with no xtype...
