Template Onclick

[pstapley]

I have a Viewport with the west section being used for navigation "links". The navigation panel consists of a vbox that contains navigation panels which contain multiple links created with a template. As you can see I have added the onlick with the function I want called when the link is clicked. Is this a correct way to implement the onclick? I looked at the feed viewer example which uses a selection model, this seemed to be over kill for what I need. Thanks for the suggestions.

Ext.define('CCC.NavPanel', {
    extend: 'Ext.panel.Panel',
    
    initComponent: function(){
        Ext.apply(this, {
            frame:true,
            collapsible:true,
            collapsed: false,
            animCollapse: false,
            items: this.createView()
        });
        this.callParent(arguments);
    },
    createView: function() {
        this.view = new Ext.DataView({
            store: new Ext.data.Store({
                model: 'Links',
                data: this.links
            }),
            trackOver: true,
            itemSelector: '.nav-list-item',
            overItemCls: 'nav-list-item-hover',
            tpl: '<tpl for="."><div class="nav-list-item" onclick="{fun}">{title}</div></tpl>'
        });
        return this.view;
    }
});

example of this.links

links: [{
    title: 'Accounts',
    fun: 'accounts'
}, {
    title: 'Domains',
    fun: 'domains'
}, {
    title: 'Export',
    fun: 'export'
}]

[pstapley]

I think I answered my own question. I played a bit more with the feed reader example and I decided to use the selection model and fire an event on each click. The center portion of the viewport will listen for the event and display the appropriate panel. Thanks!

[TommyMaintz]

Using the selection model is definitely the way to go. Binding onclick events inline in your tpl is always a terrible idea. This way the framework doesnt get to make sure that the listeners are properly cleaned up when you refresh or change the data in your dataview and memory leaks will be the result on some browsers.