How to trigger an EVENT defined in CONTROLLER from XTemplate

[jeetmarwah]

Hi,

I am trying to create a social screen similar to Facebook or chatter or any other social site. For that I have defined a XTemplate. It displays all the Posts.

For each Post, there are multiple Comments. To add a new Comment, there is a button 'Comment' which gets displayed when 'Add Comment' link is clicked.


Goal :
When 'Comment' button is clicked, it should refresh the Posts view.
Now , we cannot access a 'Controller' functions from a View. For that , I created an event 'refreshpost' which will reload the page again.

Problem:
I don't know how to trigger an event from an XTemplate.

Here is the View Code:


var postTpl = new Ext.XTemplate
(
'<div>',
'<tpl for=".">',
'<div class="">',
'<div class="">',
'<span class="" style="display:none">0D55000000FckWE</span>',
'<span class="" style="display:none">0F9500000000232</span>',
'<span class="" style="display:none">Chatter Group</span>',
'<span class="" style="display:none">{id}</span>',
'<span class="" style="display:none">{posttype}</span>',
'<div class="">',
'<div class="">',
'<a href="/0F9500000000232" class="">{targetentity}</a> — ',
'<span class="">',
'<a href="/00550000001qNTE" class="">{postauthor}</a>',
'<span style="float:right;color: #909090;">{postdate}</span>',
'</span>',
'<br/><br/>',
'<span class="">{postcontent}</span>',
'</div>',
'<div class="">',
'<div class=" "></div>',
'<div class="cxcomments ">',
'<div class="" style="display:none"></div>',
'<div class=" " style="display:block">',
'<div class=" showmorecommentscontainer">',
'<span class="">Comments</span>',
'</div>',
'</div>',
'<tpl for="comments">',
'<div class=" " style="display:block">',
'<span class="">',
'<span class=""><a href="/00550000001qcWu" class="">{author}</a></span>',
'<span style="float:right;color: #909090;">{date}</span><br/><br/>',
'<span class="">{comment}</span><br/><br/>',
'<span class=""></span>',
'</span>',
'</div>',
'</tpl>',
'</div>',

'<div id={[this.getTADivId(values)]} class="" style="display:none">',
'<div class=" feeditemcommenttext">',
'<div class="">',
'<form>',
'<textarea id={[this.getTAId(values)]} name="tacomment" class="" tabindex="0" role="textbox" title="Write a comment..."></textarea>',
'</form>',
'<div class=" " style="display:none"></div>',
'<input id="{[this.getCommentBtnId(values)]}" class="" type="button" value="Comment" title="Comment"/>',
'<div class=""></div>',
'</div>',
'</div>',
'</div>',

'<div style="display:block" class=" ">',
'<div class="">',
'<a id={[this.getLinkId(values)]} href="" class="" title="Comment on this post">Add Comment</a>',
'<span class=" "> | </span>',
'<a href="" class=" " onclick="" title="Comment on this post">Like</a>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>',
'</tpl>',
'</div>',
{
getLinkId: function(values) {
var linkId = Ext.id() + '||' + values.id + '||' + values.targetentity.replace(/\s+/g, "~") + '~-~' + values.postauthor.replace(" ", "~");
Ext.Function.defer(this.addOnClickForComment, 1000, this, [linkId]);
return linkId;
},
getCommentBtnId: function(values) {
var id = Ext.id() + '||' + values.id ;
Ext.Function.defer(this.addBtnOnClickForComment, 1000, this, [id]);
return id;
},
getTADivId: function(values) {
var id = "divta_" + values.id;
return id;
},
getTAId: function(values) {
var id = "ta_" + values.id;
return id;
},
showCommentTA: function(eventObj, htmlElementObj) {
eventObj.stopEvent();
//alert('link ' + htmlElementObj.id + ' clicked');
if(htmlElementObj.id)
{
var valueStr = htmlElementObj.id.split("||");
var postId = valueStr[1];
Ext.get("divta_" + postId).show();
}
cleanForm();//**js for textarea -- in the textareaResizer.js file

},
addOnClickForComment: function(id) {
console.log('id for comment -- ' + id);
//Ext.get(id).on('click', this.commentOnClick)
Ext.get(id).on('click', this.showCommentTA);
},
addBtnOnClickForComment: function(id) {
Ext.get(id).on('click', this.submitComment);
},
submitComment: function(eventObj, htmlElementObj) {
eventObj.stopEvent();


console.log('button ' + htmlElementObj.id + ' clicked');
var valueStr = htmlElementObj.id.split("||");
var postId = valueStr[1];
var comment = Ext.get("ta_" + postId);
var commentValue = comment.getValue();
console.log('comment -- ' + commentValue);

//Ext.get("ta_" + postId).setValue("");
Ext.get("divta_" + postId).hide();
//alert('link ' + htmlElementObj.id + ' clicked');

//fire the event to refersh the page
//this.application.fireEvent('reloadpost'); //*** DOES NOT WORK
this.test(); //*** DOES NOT WORK





},
test: function(){
this.callParent();
},
/*addOnClickForComment: function(id) {
Ext.get(id).on('click', function(eventObj, htmlElementObj){
eventObj.stopEvent();
alert('link ' + htmlElementObj.id + ' clicked');
})
},*/
commentOnClick: function (eventObj, htmlElementObj) {
eventObj.stopEvent();
//alert('link ' + htmlElementObj.id + ' clicked');
if(htmlElementObj.id)
{
var valueStr = htmlElementObj.id.split("||");
var postId = valueStr[1];
var postHeading = valueStr[2].replace(/~/g, " ");//replace ~ with space
console.log('postId comment -- ' + postId);
console.log('postHeading comment -- ' + postHeading);
var commentModel = Ext.create('RS.model.CommentM', {
comment:'',
postheading: postHeading,
postid : postId
});
var addcomment = Ext.widget('addcomment');
addcomment.down('form').loadRecord(commentModel);
}
}
}
);


Ext.define('RS.view.PostDisplay', {
extend: 'Ext.view.View',
alias: 'widget.postdisplay',
store: 'Posts',
autoScroll :true,


border : false,
loadMask: true,
disableSelection: true,
test: function(){
console.log('this is good');

},




itemTpl: postTpl//'<div>PostDisplay --> {name}</div><br/><br/><br/><br/><br/><br/><br/>'
});


Here is the screen shot

29905



Please let me know of any ideas/suggestions.

Thanks,
Jeet

[mitchellsimoens]

The XTemplate isn't triggering the event... the button is. You need to use ComponentQuery to get the instance of the button and listen for the click event on that button.

[jeetmarwah]

I think I am already doing that. One of the member functions of the XTEmplate (submitComment) gets called/executed when the 'Comment' button is clicked. Please refer to the code.

But with that, I want to simulate a 'click' on the navigation bar on the left. I am not sure how can I refresh the current panel.

Please advise.

Thanks,
Jeet.

[jeetmarwah]

I am not successful in triggering an Event from a XTemplate so I am changing my approach to see if this works.

These are the steps of what is happening:
- User clicks on Add Comment,
- a comment box appears
- user enters the comment and clicks 'Comment' button.
- This calls the 'submitComment' function in the code below. That should
1) submit the request to the server
2) on success, it should get the new data and replace the old one. For that, I want to replace the existing element with the new element. This is where it is throwing me an exception.

So all I am trying to do is to replace 1 element with the other. Any Ideas?

I have just copied the 'submitComment' function for simplicity. Rest of the code is similar to the initial posting.

Here is the code:



submitComment: function(eventObj, htmlElementObj) {
eventObj.stopEvent();


console.log('button ' + htmlElementObj.id + ' clicked');
var valueStr = htmlElementObj.id.split("||");
var postId = valueStr[1];
var comment = Ext.get("ta_" + postId);
var commentValue = comment.getValue();
console.log('comment -- ' + commentValue);

//Ext.get("ta_" + postId).setValue("");
Ext.get("divta_" + postId).hide();
//alert('link ' + htmlElementObj.id + ' clicked');

//fire the event to refersh the page
//this.application.fireEvent('reloadpost'); //*** DOES NOT WORK
//this.test(); //*** DOES NOT WORK
/* //Server side submit
Ext.Ajax.request({
url: '/resolve/service/submitComment',
params: {
postId: postId,
comment: commentValue
},
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
//me.refreshPost();
}
});
*/

//replace the updated post
var newPostModel = Ext.create('RS.model.Post', {
id : '1323316428761',
name : '',
posttype : 'Post',
targetentity : 'TARGET NAME - NEW',
postauthor : 'user20- NEW',
postdate : 'Dec 12, 2011',
postcontent : 'this is to test the handles',
comments : []
});


var newElement = postTpl.applyTemplate({
id : postId,
name : '',
posttype : 'Post',
targetentity : 'TARGET NAME',
postauthor : 'user20',
postdate : 'Dec 31, 2011',
postcontent : 'this is to test the handles',
comments : []
});


var postEl = Ext.get(postId);
//postEl.remove();
postEl.replaceWith(newElement); //** DOES NOT WORK



},

[jeetmarwah]

Got an update..After trying all the apis in the Element, I was able to use the html one successfully.

Here is the updated code.



submitComment: function(eventObj, htmlElementObj) {
eventObj.stopEvent();


console.log('button ' + htmlElementObj.id + ' clicked');
var valueStr = htmlElementObj.id.split("||");
var postId = valueStr[1];
var comment = Ext.get("ta_" + postId);
var commentValue = comment.getValue();
console.log('comment -- ' + commentValue);

Ext.Ajax.request({
url: '/resolve/service/submitComment',
params: {
postId: postId,
comment: commentValue
},
success: function(response){
var text = response.responseText;
var jsonObj = Ext.JSON.decode(text);
var postId = jsonObj.postId;
var commentObj = jsonObj.comment;

var newComment = commentTpl.applyTemplate(commentObj);
//var newCommentEl = new Ext.Element(newComment);
//Ext.get('allcomments_' + postId).insertFirst(newCommentEl);
Ext.get('allcomments_' + postId).insertHtml('afterBegin', newComment);
}
});
},