How to create custom ExtJS form field component?

Question

I want to create custom ExtJS form field components using other ExtJS components in it (e.g. TreePanel). How can I do it most easily?

I\'ve read doc

Answer 1

I've done this a few times. Here is the general process/pseudo-code I use:

• Create an extension of field that provides the most useful re-use (typically Ext.form.TextField if you just want to get/set a string value)
• In the afterrender of the field, hide the textfield, and create a wrapping element around this.el with this.wrap = this.resizeEl = this.positionEl = this.el.wrap()
• Render any components to this.wrap (e.g. using renderTo: this.wrap in the config)
• Override getValue and setValue to talk to the component(s) you rendered manually
• You may need to do some manually sizing in a resize listener if your form's layout changes
• Don't forget to cleanup any components you create in the beforeDestroy method!

I can't wait to switch our codebase to ExtJS 4, where these kinds of things are easy.

Good luck!