Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default itemTap and itemSelector is broken for nested data in xtemplate

    itemTap and itemSelector is broken for nested data in xtemplate


    When using an xtemplate to render a nested list of associated objects, itemtap on the nested items fails, because ultimately the click event tries to do a store.getAt(index) applying the index to the parent rather than the child data.

    Mock Data:
    Code:
    [{  "start_at":"2011-06-19T17:55:01Z",  
      "events": [{ "id":1,    "title":"Mid term Exam",    "start_at":"2011-06-19T17:55:01Z", "end_at":"2011-06-20T17:55:01Z"  }]
      },
     {  
      "start_at":"2011-06-21T17:55:01Z", 
      "events": [
            { "id":2,    "title":"Class Party",    "start_at":"2011-06-21T17:55:01Z",    "end_at":"2011-06-26T17:55:01Z"     },    
            {     "id":3,    "title":"Anna Kendrick's birthday",    "start_at":"2011-06-21T17:55:01Z",    "end_at":"2011-06-26T17:55:01Z"     }, 
            {    "id":4,    "title":"Anna Kendrick's birthday  again",    "start_at":"2011-06-21T17:55:01Z",    "end_at":"2011-06-26T17:55:01Z"     }
        ]
    }]
    Model:
    Code:
    Ext.regModel('CalendarDate', {  fields: ['start_at'],
      hasMany: { name: 'events', model: 'CalendarItem'}
    });
    Ext.regModel('CalendarItem', {
      fields: ['id', 'title', 'body',
        {name: 'start_at', type:'date'},
        {name: 'end_at',   type:'date', dateFormat: 'c'},
        'allday']
    });
    List:
    Code:
    this.list = new Ext.List({      itemSelector: 'div.events',
          store: new Ext.data.JsonStore({
            model: 'CalendarDate',
            proxy: {
              type: 'ajax',
              url : '/m/data/calendar.json'
            },
          }),
          itemTpl: new Ext.XTemplate(
            '<div class="date-entry">',
              '<h2>{start_at:date("d")}</h2>',
              '<h3>{start_at:date("D")}</h3>',
              '<tpl for="events">', 
                '<div id="event-{id}" class="events">',
                  '{title} ',
                  '<time class="grey_text">',
                    '{start_at:date("M d, Y")} - {end_at:date("M d, Y")}',
                  '</time>',
                '</div>',
              '</tpl>',
            '</div>')
        });
    Clicking on the first three sort of works, in that it doesn't throw an error. But anything over count(root) gives
    • Uncaught TypeError: Cannot read property 'id' of undefined
    This is similar behavior to this threadhttp://www.sencha.com/forum/showthre...item-selection.

    Trace from the console

    . Uncaught TypeError: Cannot read property 'id' of undefined
    . Ext.extend.getKeysencha-touch-debug.js:1390

    . Ext.extend.addsencha-touch-debug.js:1372

    . Ext.AbstractStoreSelectionModel.Ext.extend.doMultiSelectsencha-touch-debug.js:22201

    . Ext.AbstractStoreSelectionModel.Ext.extend.doSelectsencha-touch-debug.js:22176

    . Ext.AbstractStoreSelectionModel.Ext.extend.selectWithEventsencha-touch-debug.js:22106

    . Ext.DataViewSelectionModel.Ext.extend.onItemClicksencha-touch-debug.js:22460

    . anonymous:5

    . (anonymous function)sencha-touch-debug.js:4428

    . Ext.gesture.Gesture.Ext.extend.firesencha-touch-debug.js:18588

    . Ext.gesture.Tap.Ext.extend.onTouchEndsencha-touch-debug.js:18781

    . Ext.gesture.Manager.Ext.AbstractManager.onTouchEndsencha-touch-debug.js:18282

    . (anonymous function)sencha-touch-debug.js:3421


    Lastly:
    The problematic line is actually in onItemClick where it says
    Code:
    onItemClick: function(e) {
            var view   = this.view,
                node   = view.findTargetByEvent(e);
          
            if (node) {
                this.selectWithEvent(view.getRecord(node), e);
            } else {
                return false;
            }
        },
    The view.getRecord returns undefined, because view.getRecord just gets the index at the location of the parent, not the child nodes.

    HTH

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    0
    irfaniqbal is on a distinguished road

      0  

    Question


    hi brink,
    did you find any solution for this problem? i also have similar problem. please do let me know if you find any solution. thanks

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default


    I did not. I basically don't use associated objects because their implementation seems broken.

    To resolve this problem I just made a couple templates and stuck them together.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    0
    pd1980 is on a distinguished road

      0  

    Default How did you solve the issue

    How did you solve the issue


    Hi brink,

    I have similar situation, where I am receiving nested data in my json. How did you solve the issue by using "couple of templates" as you mentioned. Could you please provide your working solution?

    Thanks,
    PD

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Location
    Greater Seattle Area, WA
    Posts
    12
    Vote Rating
    0
    brink is on a distinguished road

      0  

    Default


    Heya, at one point I was munging the output of two templates onto each other, eg
    tpl1 for the parent object,
    tpl2 for the association

    tpl.apply(parent) + tpl2.apply(associated)

    Sort of a suboptimal solution IMHO

    While I was resolving that issue more satisfactorily, we changed our requirements so I kind of dodged a bullet on solving the issue I"m sorry, I don't have a real solution for you.

Thread Participants: 2