genTaliaru
22 Jul 2009, 7:35 AM
I have create i treepanel item from for form items.
Ext.ux.form.FormTreePanel = Ext.extend(Ext.tree.TreePanel,
{
// private
isFormField: true,
// private
onRender: function()
{
// call parent
Ext.ux.form.FormTreePanel.superclass.onRender.apply(this, arguments);
this.hiddenField = this.el.insertSibling(
{
tag: 'input',
type: 'hidden',
name: this.hiddenName,
id: (this.hiddenId || this.hiddenName)
}, 'before', true);
this.hiddenField.value = '';
this.hiddenName = this.name;
this.el.dom.removeAttribute('name');
if (Ext.isGecko)
{
this.el.dom.setAttribute('autocomplete', 'off');
}
/*
* toggleChildrenOnParentCheck - if is true and !lead ischecked then all the children will be checked/unChecked
* checkParentOnChildCheck - if is true and leaf is checked and parent is not checked, then the parent will be checked
*/
if (this.toggleChildrenOnParentCheck != undefined || this.checkParentOnChildCheck != undefined)
{
this.on("checkchange", function(Node, checked)
{
if (this.toggleChildrenOnParentCheck == true)
{
if (!Node.isLeaf() && Node.hasChildNodes())
{
$A(Node.childNodes).each(function(Child)
{
Child.getUI().toggleCheck(checked);
})
}
}
if (this.checkParentOnChildCheck == true)
{
if (checked == true && Node.isLeaf() && Node.parentNode && !Node.parentNode.getUI().isChecked())
{
Node.parentNode.getOwnerTree().suspendEvents();
Node.parentNode.getUI().toggleCheck(true);
Node.parentNode.getOwnerTree().resumeEvents();
}
}
this.updateHidden();
}, this)
}
},
getName: function()
{
return this.hiddenId;
},
isDirty: function()
{
console.log('check dirty');
return true
},
// private
updateHidden: function(v)
{
this.hiddenField.value = (v) ? v : this.getValue()
},
getValue: function(getNodeFieldValue)
{
if (getNodeFieldValue == undefined)
{
getNodeFieldValue = "id";
}
return this.getChecked(getNodeFieldValue, this.getRootNode());
},
setValue: function(v)
{
this.updateHidden(v);
}
});
// register xtype
Ext.reg('xformtreepanel', Ext.ux.form.FormTreePanel);
This works for me perfectly.
But i fond one problem.
if want to find form items by this
Ext.getCmp("formID").getForm().items.each(function(field)
{
console.log(field);
})
All the form itmes is listed in console but not the xformtreepanel.
Can somebody help me to figure out why is this so, and fix it.
Ext.ux.form.FormTreePanel = Ext.extend(Ext.tree.TreePanel,
{
// private
isFormField: true,
// private
onRender: function()
{
// call parent
Ext.ux.form.FormTreePanel.superclass.onRender.apply(this, arguments);
this.hiddenField = this.el.insertSibling(
{
tag: 'input',
type: 'hidden',
name: this.hiddenName,
id: (this.hiddenId || this.hiddenName)
}, 'before', true);
this.hiddenField.value = '';
this.hiddenName = this.name;
this.el.dom.removeAttribute('name');
if (Ext.isGecko)
{
this.el.dom.setAttribute('autocomplete', 'off');
}
/*
* toggleChildrenOnParentCheck - if is true and !lead ischecked then all the children will be checked/unChecked
* checkParentOnChildCheck - if is true and leaf is checked and parent is not checked, then the parent will be checked
*/
if (this.toggleChildrenOnParentCheck != undefined || this.checkParentOnChildCheck != undefined)
{
this.on("checkchange", function(Node, checked)
{
if (this.toggleChildrenOnParentCheck == true)
{
if (!Node.isLeaf() && Node.hasChildNodes())
{
$A(Node.childNodes).each(function(Child)
{
Child.getUI().toggleCheck(checked);
})
}
}
if (this.checkParentOnChildCheck == true)
{
if (checked == true && Node.isLeaf() && Node.parentNode && !Node.parentNode.getUI().isChecked())
{
Node.parentNode.getOwnerTree().suspendEvents();
Node.parentNode.getUI().toggleCheck(true);
Node.parentNode.getOwnerTree().resumeEvents();
}
}
this.updateHidden();
}, this)
}
},
getName: function()
{
return this.hiddenId;
},
isDirty: function()
{
console.log('check dirty');
return true
},
// private
updateHidden: function(v)
{
this.hiddenField.value = (v) ? v : this.getValue()
},
getValue: function(getNodeFieldValue)
{
if (getNodeFieldValue == undefined)
{
getNodeFieldValue = "id";
}
return this.getChecked(getNodeFieldValue, this.getRootNode());
},
setValue: function(v)
{
this.updateHidden(v);
}
});
// register xtype
Ext.reg('xformtreepanel', Ext.ux.form.FormTreePanel);
This works for me perfectly.
But i fond one problem.
if want to find form items by this
Ext.getCmp("formID").getForm().items.each(function(field)
{
console.log(field);
})
All the form itmes is listed in console but not the xformtreepanel.
Can somebody help me to figure out why is this so, and fix it.