View Full Version : How to reference generated objects properly

26 Aug 2010, 11:09 AM
I have a little search app that I built with designer. It's made up of a parent container with two children, a GridPanel and a FormPanel. My question is how to correctly reference these components when handling events and writing methods in the .js file. Here is how I have started:

//the generated code from designer
MyContainer = Ext.extend(MyContainerUi, {
initComponent: function() {

//start of custom code for event handling, etc.

//get the grid component
var trGrid = this.get('myRequestGrid');

//get the form from the form panel
var searchPanel = this.get('trSearchPanel').getForm();

//get field values from form
var fieldValues = searchPanel.getFieldValues()

//get the grid store
var gridStore = trGrid.getStore();

//just show when data loads
scope: this,
load: function(){
console.log('data was loaded!');


This is just an example of how I have begun to access the generated components - this code does not actually do anything meaningful, I just wanted to get an opinion if my methodology is correct, or if there is a better way.


30 Aug 2010, 7:12 AM
Hi md,

You should definitely utilize the "ref" configuration feature instead of assigning ids and using the get() method. "ref" is configured in the Designer using the "autoRef" configuration option in the Component Config pane. "autoRef" will automatically generate the proper path specification to put the reference onto the top-level (root) component...in other words, it will generate the "../" levels automatically. See http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component&member=ref for more information on the ref config.


30 Aug 2010, 7:17 AM
I actually just discovered that this morning, very slick! Thanks
for the reply!

30 Aug 2010, 7:19 AM
You bet. I apologize for the delayed response, but glad you are solid with ref. get() is certainly acceptable but ref tends to be much cleaner.