1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Exclamation Answered: Debugging Help

    Answered: Debugging Help


    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...

    Code:
    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?

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

    Code:
        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:

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

  3. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Question


    Thanks...

    Quote Originally Posted by Jamie Avins View Post
    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.

    Quote Originally Posted by Jamie Avins View Post
    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.

    Quote Originally Posted by Jamie Avins View Post
    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.

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    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.

  6. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

    Code:
        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:

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

  7. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Thanks!

Thread Participants: 1