How to make dynamically changing content for DetailCard of NestedList in Sencha Touch 2?

Question

I have a nested list. I want to make different content of DetailCard for DetailCard for every leaf of node. This content should have buttons. How to do it? Thanks.

Ext.define('Myproj.view.Home', {
extend: 'Ext.dataview.NestedList',
xtype: 'nestedlist',

config: {
    title: 'Category2',
    iconCls: 'home',

    margin: 20,
    listConfig: {
        ui: 'round',
        itemTpl: '<div>{text}</div>',
    },
    detailCard: {
        xtype: 'panel',
        html: 'This is the leaf node detail card',
        items: function (){

                }
            }

    },
    listeners: {
        itemtap: function (nestedList, list, index, target, record, e, eOpts) {
            var name = record.get('id');
            var html = Ext.String.format('This {0}', name);
            this.getDetailCard().setHtml(html);

        }
    },
    store: {
        type: 'tree',
        fields: [{
            name: 'text',
            type: 'string'
        }],
        defaultRootProperty: 'team',
        sorters: 'text',
        root: {
            text: 'Teams',
            team: [{
                text: 'Lang',
                team: [{
                    text: 'Java',
                    leaf: true
                    },{
                    text: 'Python',
                    leaf: true
                    }]
            }]
            }
            }
            });

I try to do .add() instead of setHtml() from within listener. This not work.