Results 1 to 3 of 3

Thread: Template Onclick

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Vote Rating

    Default Template Onclick

    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, {
                collapsed: false,
                animCollapse: false,
                items: this.createView()
        createView: function() {
            this.view = new Ext.DataView({
                store: new{
                    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'

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2011
    Vote Rating


    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!

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Haarlem, Netherlands
    Vote Rating


    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.

Similar Threads

  1. Ext.DomHelper.Template: one template, ten YUI grids
    By moraes in forum Community Discussion
    Replies: 11
    Last Post: 18 Dec 2012, 4:55 AM
  2. Ext.Template update the template
    By pothibo in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 26 Feb 2011, 4:34 PM
  3. onclick in template data
    By bugsbunny in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 9 Jun 2009, 6:11 AM
  4. Replies: 4
    Last Post: 20 Aug 2007, 9:18 AM
  5. Ext.DomHelper.Template or Ext.Template?
    By mystix in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 1 Mar 2007, 3:05 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts