1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    30
    Vote Rating
    0
    pstapley is on a distinguished road

      0  

    Default Template Onclick

    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.

    Code:
    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
    Code:
    links: [{
        title: 'Accounts',
        fun: 'accounts'
    }, {
        title: 'Domains',
        fun: 'domains'
    }, {
        title: 'Export',
        fun: 'export'
    }]

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    30
    Vote Rating
    0
    pstapley is on a distinguished road

      0  

    Default


    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
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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

Thread Participants: 1