PDA

View Full Version : Click event on element



bkraut
20 Jun 2011, 1:09 AM
Hi,

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() {
alert('Working');
},
scope: this
}
});
requirement.init();




Here is requirement class:



Ext.ux.StoryBoardRequirement = function(config) {
Ext.apply(this, config);
this.addEvents('click');
};

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

init: function() {
this.initTemplates();
},

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

if(!ts.requirement){
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>',
'<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.

Bojan

bkraut
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.

26664

skirtle
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) {
return;
}

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?