Question

I’m trying to set up my controller to respond to Ext.XTemplate events and avoid the mess of writing a bunch of hacked javascript.

Unfortunately, I can’t find a way to either 1) log a click event or 2) use componentQuery to register the XTemplate.

Here’s a basic controller config:

config: {
        refs: {         
            reportChooser: 'xtemplate[id=jobReportChooser]'
        },
        control: {
            reportChooser: {
                tap: 'onAnonymousTap'
            }
        }
    },

Is there a way to do it in the controller OR at least clean up the listeners?

Answer 1

I couldn’t find a direct reference since XTemplate has no built-in Events, but here’s a nice workaround that’s a little cleaner.

In your view initialize method

initialize: function() {
    this.element.on({
        tap: function(e, dom) {

            var el = Ext.get(e.target),
                elParent = Ext.get(e.parent),
                fireEvent;

            window.jobAction = this;
            window.jobEl = el;

            if (el.hasCls('job-start') || el.parent().hasCls('job-start')) {
                fireEvent = 'start';
            } else if (el.hasCls('job-hold') || el.parent().hasCls('job-hold')) {
                fireEvent = 'hold';                    
            }  else if (el.hasCls('job-report') || el.parent().hasCls('job-report')) {
                Ext.Viewport.setMasked({ xtype: 'loadmask' });
                var teamId = APPNAME.currentItem.data.teamId;
                var jobId = APPNAME.currentItem.data.jobId;

                APPNAME.app.dispatch({controller: 'Jobs', action: 'displayReportChooser', args:[teamId,'job',jobId]})
            }

            if (fireEvent) {
                Ext.Viewport.setMasked({ xtype: 'loadmask' });
                this.fireEvent(fireEvent, Alloy.currentJob, el);
            }

        },
        delegate: '.job-info',
        scope: this
    });
}

What it means

Use the application dispatch method. It will make life a lot easier and help you still organize actions inside the controller.

http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Application-method-dispatch