Search code examples
javascriptextjs4sencha-architect

In ExtJS4, why are parameters loggable but not programmatically accessible?

I'm using Sencha Architect 2 to create an application. I've run into an issue a few different times while writing event handlers where I cannot access data.

Specifically, I am trying to write an AfterRender function to programmatically select the first item in a combobox. The combobox is populated from a JSON store, which loads fine. I'm not able to access loaded data, so I have the following code in the function to log what is available:

onComboboxAfterRender: function(abstractcomponent, options) {
  // abstractcomponent.value = abstractcomponent.store.data.items[0].date;
  console.log(abstractcomponent);
  console.log(abstractcomponent.store);
  console.log(abstractcomponent.store.data);
  console.log(abstractcomponent.store.data.items);
  console.log(abstractcomponent.store.data.items[0]);
}

The following is the javascript console output:

console.log output

As can be seen, in abstractcomponent.store.data, the third item logged, items is shown to be empty. Yet if I drill in, items is an array with three entries.

Obviously I'm doing something fundamentally wrong. I would appreciate advice on how to access store data from inside the After Render handler, as well as if there's some sort of fundamental ExtJS/JavaScript/JavaScript console misconception that I have, because it makes no sense to me what is occurring.

Solution

  • It's a reference. When you outputted it to the console the store had not yet been populated.

    However when you use Chrome/Firebug and expand the console it is now there and will be filled out.