getDetailCard works with sencha-touch-all-compat but not with sencha-touch-all-debug

I cannot figure out why the following code is working fine, that is it showing the detailCard with sencha-touch-all-compat.js but it does not work with sencha-touch-all-debug.js. I am using sencha-touch-2-b3.

Code:

---

        var petNL =  Ext.create('Ext.dataview.NestedList', {
                iconCls: 'dog_icon',
                                xtype: 'nestedlist',
                                title  : 'Available Dogs',
                                store: store,
                            getItemTextTpl: function() {
                                        return listfmt;
                                },
                            getDetailCard: function(node) {
                                  if (node) {
                                                return {
                                                        xtype: 'panel',
                                                        scrollable: true,
                                                        styleHtmlContent: true,
                                                        fullscreen: true,
                                                    items:{
                                                                  docked : 'top',
                                                                  xtype: 'toolbar',
                                                                  title: node.get('name'),
                                                                  },                                                       
                                                        html: 
                                                                '<img src="' + node.get('avatar') + '" width="310" height="310" >'
                                                                + 'Age:</strong> ' + node.get('age') + '<br/>'
                                                }
                                  }
                          }
                        });

---

Thank you in advance for your assistance.

There is no config for getDetailCard, only one for detailCard. If you want to override the method like this, you cannot pass it in as a config. You should extend the class.

Jamie,

Thanks for the reply but I'm not sure I understand. Can you please provide an example? Thank You.

Code:

---


Ext.define('my.DogList', {
    extend: 'Ext.dataview.NestedList',
    xtype: 'doglist',
    config: {
        iconCls:'dog_icon',
        title:'Available Dogs'
    },
    getDetailCard:function (node) {
        if (node) {
            return {
                xtype:'panel',
                scrollable:true,
                styleHtmlContent:true,
                fullscreen:true,
                items:{
                    docked:'top',
                    xtype:'toolbar',
                    title:node.get('name'),
                },
                html:'<img src="' + node.get('avatar') + '" width="310" height="310" >'
                    + 'Age:</strong> ' + node.get('age') + '<br/>'
            }
        }
    }
});

var petNL = Ext.create('my.DogList', {
    getItemTextTpl:function () {
        return listfmt;
    },
    store: store
});

---

I'm not sure what listfmt is since it's defined somewhere else in your closure.. Otherwise I'd put it in the new class as well.

Jamie,

Got it, thank you so very much, Secha Touch is awesome.
The running code is at http://www.vgsr.org/mobile/index.html.