Results 1 to 5 of 5

Thread: ExtJS 5 data binding and debugging when it does not work

  1. #1
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    834
    Answers
    5

    Default ExtJS 5 data binding and debugging when it does not work

    Skip next 3 paragraphs if impatient:

    First, let me say that I love the new declarative data binding. I'm constantly amazed how I can do things in a couple lines of declarative code that before would have been an ugly ref query listener fest.

    OK, now that the honey moon is kind of over, I'm building some more non-demo apps and I'm finding it very difficult to figure out why things don't work when it looks like they should. I'm not running into any ExtJS 5 instabilities or issues that I know of, it's just the space between my ears that makes mistakes.

    Sad to admit, but one manager I worked for once told me that I should spend more time in design and less time in the debugger. Well, old dog, not likely to learn that new trick. I just like to do my design by building iterative prototypes so I can "feel" my apps rather than just imaging them.

    My problem is that when a bind does not work, nothing gets displayed. No console errors, no warnings, just nothing. Could someone suggest how to debug bind problems? I'd love the new data binding so much more if I could quickly go from non-working to working code. For example, the issue I just ran into was I was building a simple template bound to the selected row. I mis spelled my speakersList variable and of course it did not work. No error, just not working. Besides debugging by inspection, what is a better way to figure out the issue?

    Thanks, -Peter

    Code:
     {
                        xtype: 'panel',
                        tpl: [
                            '<tpl for=".">',
                            '    {userFirstName} {userLastName}',
                            '</tpl>',
                            ''
                        ],
                        bind: {
                            data: '{selectedSession.speakersList}'
    }

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    We have a tool, the bind inspector that exists. If you open the ticket app and double click on the Sencha logo you'll see it.

    It still needs some work, but it's a good starting point.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    Quote Originally Posted by evant View Post
    We have a tool, the bind inspector that exists. If you open the ticket app and double click on the Sencha logo you'll see it.

    It still needs some work, but it's a good starting point.
    Bind-inspector-what?

    I face the same difficulties

  4. #4
    Sencha User
    Join Date
    Mar 2016
    Posts
    99
    Answers
    5

    Default

    >>Bind-inspector-what?

    Same problem here and I suppose there will be no answer.

  5. #5
    Sencha User
    Join Date
    Mar 2016
    Posts
    99
    Answers
    5

    Default

    using `data` instead of `formulas` worked fine, bindings now working, when I update that data item:

    /*formulas: {
    hasSubaspects: { ... }
    }*/
    data: {
    hasSubaspects: false
    },

    PS: I used same formula (with different, unique name) in other place, and bindings worked there, so formula itself is correct

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •