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

[bsklar]

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.

 	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.

[Jamie Avins]

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.

[bsklar]

Jamie,

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

[Jamie Avins]

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.

[bsklar]

Jamie,

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