View Full Version : Click event on element

20 Jun 2011, 1:09 AM

I'm working on a storyboard for Agile project management. I've checked numerous examples on how add on click event on an element, but I can not get it working.

Here is my example:

I have a board, where I iterate through requirements and then I create UI element for requiement like this:

var requirement = new Ext.ux.StoryBoardRequirement({
requirement: requirement,
listeners: {
click: function() {
scope: this

Here is requirement class:

Ext.ux.StoryBoardRequirement = function(config) {
Ext.apply(this, config);

Ext.extend(Ext.ux.StoryBoardRequirement, Ext.Panel, {

init: function() {

initTemplates : function(){
var ts = this.templates || {};

ts.requirement = new Ext.Template(
'<div class="x-boardrequirement">',
'<div class="title">{title}</div>',
'<div class="project">Project: {project}</div>',
'<div class="owner">Owner: {owner}</div>',
'<div class="estimate">Estimate: {estimate}</div>',
'<div class="tasks">{tasks}</div>'
this.templates = ts;

render: function() {
if (!this.requirement) Ext.MessageBox.alert("Error", "Requirement record must be set for StoryBoard Requirement rendering.");
else {
var reqTpl = this.templates.requirement;
var reqHtml = reqTpl.apply({
title: this.requirement.json.title,
project: this.requirement.json.project,
owner: this.requirement.json.owner,
estimate: this.requirement.json.estimate,
tasks: '' //this.requirement.tasks
return reqHtml;


On click nothing happens. I checked a lot of tutorials on how to add an event to a div, but I don't see where I have an error.

Any help appreciated.


21 Jun 2011, 5:47 AM
I just would like to add click events on stories and tasks.
Here is a screenshot of a component.


22 Jun 2011, 1:21 AM
You've not actually registered a listener on the panel's element. Normally you'd just have something like this in your subclass:

afterRender: function() {
Ext.ux.StoryBoardRequirement.superclass.afterRender.apply(this, arguments);

this.mon(this.getEl(), 'click', this.onClick, this);

onClick: function(ev) {
if(ev.button !== 0) {

this.fireEvent('click', this);

That said, I doubt this will work because you've completely replaced the render() method, so I don't think afterRender() will ever be called. That override of render() looks very, very strange to me. Have you considered using a Ext.DataView instead?