PDA

View Full Version : Using renderTo in custom form field component



BillHubbard
13 Aug 2013, 10:33 AM
I am trying to create a custom form field component that displays an icon that opens a menu when clicked, and the value selected from the menu determines the value in the field. But I am stuck at how to render the click-able icon. I am extending Ext.field.Base and have defined the configs for my icon and its menu, but I don't know how to get the icon component attached to the rendering of the field. I don't know when/where to instantiate its config so there is an element available to renderTo. I've discovered fieldSubTpl, but am at a loss as to how to attach something to an element defined there. How do I achieve this?

tobiu
13 Aug 2013, 11:54 AM
As a start, take a look at the code of our TriggerField, which is a similar use case (rendering a trigger element behind the field):
http://docs.sencha.com/extjs/4.2.1/source/Trigger.html#Ext-form-field-Trigger

BillHubbard
15 Aug 2013, 11:04 AM
Thanks for the reply, but I've been poking around in ExtJS code (actually, the Trigger class was the one I was looking at), and I don't understand what I need to do - the code is just not talking to me. I wound up just adding an afterrender listener to render and attach my components to the element to my custom field, but I don't know if there is a disadvantage to that approach (it's working). Can you at least point me to what, specifically, to look at, or give me the general idea of how Trigger adds the trigger element to the input field?
Thanks.

BillHubbard
16 Aug 2013, 5:30 PM
I figured it out. Since I am creating another custom component (i.e. using a component) and attaching it to the extended component, it was the right approach to instantiate and attach it in an afterrender handler. But I was injecting a tag into the fieldSubTpl template incorrectly, causing it to add a new element with each new instance of my component. I merely had to define the fieldSubTpl explicitly to provide a known id, derived from the component id, and use that to attach my other component. Now I have a fully functional component, working as desired.