Debugging Help

[robl]

Sencha Touch is generally a joy in terms of results but the pain point is in debugging. I've seen the slides and posts about JSLint, Weinre, console logging, etc.. but much more is needed. The debugging methods I seek are "probably" already in the code but I just don't know how to access them yet. If there isn't already documentation on this, the Sencha documentation team should address this.

I would like to know three things:

1. Methods I can implement on a Component that give me a "hook" from which I can inspect the state of the Component graph. I know about "initialize" but that doesn't help me when the Component fails to display. I think I want a "post render" event hook/method but I'll leave it to you Sencha experts to tell me what's best.

2. How can I access the objects in the Component's configuration? I need a code sample here not just the concept. Below is a snippet to start with. How can I access the "list" and then it's "store" or the "items" in the "panel"? I think this will involve the ComponentQuery class but I need specific examples...

Ext.define('MyApp.view.EmployeesTab', {
           extend: 'Ext.Panel',
           xtype: 'employeestab',
           requires: ['MyApp.model.Employee', 'MyApp.store.EmployeeStore'],
           
           config: {
           title: 'Employees',
           iconCls: 'team',
           layout: 'card',
           items: [
                   {
                   xtype: 'panel',
                   layout: 'fit',
                   items: [
                           {
                           xtype: 'list',
                           indexBar: true,
                           itemTpl: '<div>{lastName}, {firstName} {salary}</div>',
                           store: 'EmployeeStore'
                           }
                           ]
                   }
                   ]
           }
});

3. How can I modify the config programmatically without having to programmatically construct or restructure the whole config? Specifically, say I wanted to instantiate the employee "store" above and insert it in the config. What method can I implement/override that allows me to "get at" the "list" object configuration and do a setStore() on it?

[Jamie Avins]

1. Your probably want the 'painted' event or isPainted flag which is set when a component is put into the mainline DOM. There is also an 'erased' event when a component is taken back out of the mainline DOM.

2. getInitialConfig will return that for you. You can pass it a property as well if you just want one property returned.

3. Not sure why you wouldn't just instantiate the store beforehand list you do in your example. You can change stores dynamically on your list; Just use setStore(yourNewStore) on the list component you have. Note that there is a setConfig method as well but we don't recommend using it, this takes a new config object and a flag to prevent it from overwriting existing properties. setConfig is NOT deeply merged though.

[robl]

Thanks...

1. Your probably want the 'painted' event or isPainted flag which is set when a component is put into the mainline DOM. There is also an 'erased' event when a component is taken back out of the mainline DOM.

I need a code sample as I don't understand what this would look like.

2. getInitialConfig will return that for you. You can pass it a property as well if you just want one property returned.

In what method on the component, do call getInitialConfig()? Need code sample.

3. Not sure why you wouldn't just instantiate the store beforehand list you do in your example. You can change stores dynamically on your list; Just use setStore(yourNewStore) on the list component you have. Note that there is a setConfig method as well but we don't recommend using it, this takes a new config object and a flag to prevent it from overwriting existing properties. setConfig is NOT deeply merged though.

Sure but I was trying to utilize the dependency injection of the MVC approach. Moreover, I don't know which method to add it to. Please provide a code sample.

Alot of this is obvious to you but not to a new Sencha Touch developer. Code samples would be really helpful.

[robl]

FYI - By code sample, I do not mean a full example but rather a snippet of a few lines of code that illustrate the solution.

[Jamie Avins]

For your painted events, something like this in your class definition:

    initialize: function() {
        this.callParent(arguments);

        this.on({
            scope: this,
            painted: 'onPainted',
            erased: 'onErased'
        });
    },

    onPainted: function() {
        // This method is executed when this component is placed into the document
    },

    onErased: function() {
        // This method is executed when this component is removed from the document (not necessarily destroyed)
    }

initialConfig is a bit rare, here is an example of it's use from our Checkbox.js code:

    doInitValue: function() {
        this.originalState = this.getInitialConfig('checked');
        this.callParent(arguments);
    },

[robl]

Thanks!