Execute Ext function from the link in the title

[DroidIn.net]

I'm trying to display a breadcrumb as a title in the title bar of tab panel. Based on the selected tab this breadcrumb changes dynamically and reflects "drill in" hierarchy of the current tab. So it can be "foo", "foo->bar", "foo->bar->buz", etc. If there is more than one step then prior sections became hyperlinks. The complete information about breadcrumb is encapsulated as Ext.model object.
Now the question: What is the shortest, efficient and most elegant way to pass breadcrumb object into the function when user clicks breadcrumb section?
The following is a function in the custom BreadcrumbController that adds formatted title:

    updateBreadcrumb: function(tabPanel, record) {
        if(record){
            var me = this;
            var type = record.get('type');
            var SEP = ' > ';
            var crumb;
            if (type == 'R_FACTORY') {
                crumb = record.get('name');
            } else if (type == 'R_JOB') {
                crumb = '<a id="breadcrumb" href="#">' + record.get('factoryName') + '</a>' + SEP + record.get('name');
            } else { // for other cases we will load breadcrumb data from server
                crumb = '<i>loading...</i>';
                me.store.load({
                    scope: this,
                    params: record.raw,
                    callback : function(records, operation, success) {
                        console.log('loaded records');
                        if (success) {
                            var r = records[0];
                            r.set('type', type);
                            me.onBreadcrumbLoadOk(tabPanel, r);
                        } else
                        me.onBreadcrumbLoadFailed(tabPanel);
                    }
                });


            } 
            tabPanel.setTitle(crumb);
        }
    },

If you look at the 2nd "else-if" you will see <a href="#"/> tag. I was trying to do something like <a href="javascript:onClickBreadcrumb(" + Ext.encode(record) + ")"/> but this is pretty ugly and I'm also not sure where to define "onClickBreadcrumb" function? I would prefer to keep it inside BreadcrumbController but how then call it from the href="javascript:?" ?I would not mind recoding the whole breadcrumb as long as it stays in the title on the tab panel. Any suggestions?

[Phil.Strong]

Why not simply give the breadcrumb link a special class say 'crumb'

Then have a listener on all a.crumb

Often I'll add an attribute on my anchor tags like the record id so I can look that up in the click event.

<a class='crumb' rid='456' href='#'>...</a>

[DroidIn.net]

In the nutshell that is what I ended up doing. Since the "record" object is the model wrapped around some data my link generation is as follows:

   buildLinkFromRecord: function(type, record) {
        var me = this, link;
        if (type) {
            link = '<a href="javascript:void(0)" class="bookmark" data-type="' + type + '" data-rec="' + 
            Ext.htmlEncode(Ext.encode(record.data)) + '">';
        } else {
            link = '<a href="#">';
        }
        return link;
    }

And then, after the breadcrumb (which contains multiple links) is inserted I do

var bookmarks = Ext.select('*[class=bookmark]');
if (bookmarks) {
    bookmarks.on('click', function(){
        var type = Ext.htmlDecode(this.getAttribute('data-type'));
        var raw = Ext.htmlDecode(this.getAttribute('data-rec'));
        var data = Ext.JSON.decode(raw);
        var record = Ext.create('QuiApplication.model.BookmarkModel', {'type':type, 'data':data});
        me.application.fireEvent('openReporting',record);
    });
}

I was just wondering if there was an easier way to pass model object as a parameter?