View Full Version : Using Ext.ComponentQuery when component is created with Ext.DomHelper.generateMarkup

31 Mar 2014, 7:30 AM

I created a custom form field extending Ext.form.field.Base. It consists of a combobox, a button and a grid. It's basically this example (http://stackoverflow.com/questions/6153362/how-to-create-custom-extjs-form-field-component/16964118#16964118) (fiddle example (http://jsfiddle.net/amx9j/5/)- click the button) enhanced with a combobox.

Ext.define('My.view.override.AwesomeField', {
override: 'My.view.AwesomeField',
initComponent: function(){
var me = this;
me.childComponent = Ext.create('Ext.container.Container',{
items : [ me.containerItemsCfg ]
me.grid = Ext.create('Ext.grid.Panel',me.gridCfg);

// Generates the child component markup and let Ext.form.field.Base handle the rest
getSubTplMarkup: function(){

// generateMarkup will append to the passed empty array and return it
var buffer = Ext.DomHelper.generateMarkup(this.childComponent.getRenderTree(), []);
return buffer.join('');

// Regular containers implements this method to call finishRender for each of their
// child, and we need to do the same for the component to display smoothly
finishRenderChildren: function(){

// methods, callbacks and a lot of magic


The problem is, that I cannot access the "childComponents", i.e. combobox, button and grid, by component query from outside, e.g. when capturing events or working around this issue (http://www.sencha.com/forum/showthread.php?243470-Pickerfield-s-picker-vanishes-on-combo-(located-inside-that-picker)-item-mouse-click).

The question is, what am I missing to access the child components with component query from outside?

31 Mar 2014, 8:56 AM
You need to implement getRefItems. Have a look at the various implementations throughout the framework.

1 Apr 2014, 2:15 AM
Thank you, evant!