// I'm inside init() function here
<!--demandcollaborationtab.vm -->

		        demandTable.commentEditor = new Ext.form.HtmlEditor({
		            id:'demandMyComment',
			        name: 'mycomment',
			        hideLabel: true,
			        enableFontSize: false,
			        enableLists: false,
			        enableSourceEdit: false,
			    	cleanHtml: function (html) {

			    		// The <STRONG> tag is not supported in the grid control, but the <B> tag is supported for BOLD.
			    		html = html.replace(/<STRONG>/g, "<B>");
			    		html = html.replace(/<\/STRONG>/g, "<\/B>");
			    		
			    		// The <EM> tag is not supported in the grid control, but the <I> tag is supported for Italics.
			    		html = html.replace(/<EM>/g, "<I>");
			    		html = html.replace(/<\/EM>/g, "<\/I>");
			    		
			    		// This Forces a new window to popup when hyperlink is added.
			    		html = html.replace(/<A\ href/g, "<A\ target=\"_blank\"\ href");
			    		return html;
			    	},
		            width:635,
		            height:80
		        });

				demandTable.commentsDS = new Ext.data.Store({
				   	proxy: new Ext.data.HttpProxy({
				   			url: 'ajax2/Gemini?action=demand.web.ajax.GetDemandCommentsAction'
				   		}),
					reader: new Ext.data.JsonReader(
						{},
						[
						   {name: 'commentId'},
				           {name: 'commentTitle', sortType:'asUCString'},
				           {name: 'comment'},
				     	   {name: 'userId'},
				     	   {name: 'user'},
				           {name: 'timeStamp'},
				           {name: 'timeStampDisplay'}
						]),
						sortInfo:{field: 'timeStamp', direction: 'DESC'}
			    });

				demandTable.commentsDS.on('loadexception', function(proxy, data, arg, e) {
					 Ext.MessageBox.show({
					           title: 'Error',
					           msg: arg.responseText,
					           buttons: Ext.MessageBox.OK
					       });		            
		        });

				// row expander
			    var commentExpander = new Ext.grid.RowExpander({
			        tpl : new Ext.Template(
			            '<u><b>$collaboration_discussiongridexpander_title</b></u>:<br/>{comment}<br/>'
			        )
			    });
				
			    demandTable.discussionGridCtrl = new Ext.grid.GridPanel({
					ds: demandTable.commentsDS,		
					cm: new Ext.grid.ColumnModel([
	           				commentExpander,	
				     		{id:'commentTitle', header: '$collaboration_commentcolumn_header', width: 350, sortable: true, dataIndex: 'commentTitle'},
				     		{header: '$collaboration_usercolumn_header', width: 130, sortable: true, dataIndex: 'user'},
				            {header: '$collaboration_timecolumn_header', width: 110, sortable: true, dataIndex: 'timeStampDisplay'}
				        ]),
					loadMask: {msg:'$table_load_msg'},
			        frame:false,
			        collapsible: false,
			        animCollapse: false,
			        title:'$collaboration_discussiongrid_title',
				    layout:'fit',
		            width:635,
		            height: 195,
				    autoScroll: true,
				    headerAsText:true,
				    renderTo: demandTable.collaborationTabPanel,
				    enableHdMenu: false,
		        	style:'padding-top:10px;',
				    plugins: commentExpander
			    });

				var btnAddComment = new Ext.Button ({
                            id: 'addButtonMyComment',
                 		#if (!$canManageDemandItems && !$canMakeRequests)
               				disabled: true,
             			#end
			                text: '$collaboration_addcomment_btn',
			                handler: function () {
								var InsertRecord = Ext.data.Record.create(
								    {name: 'commentId'},
								    {name: 'commentTitle'},
								    {name: 'comment'},
								    {name: 'userId'},
								    {name: 'user'},
								    {name: 'timeStamp'},
								    {name: 'timeStampDisplay'}
								);
	
								var newComment = demandTable.commentEditor.getValue();
								if (newComment == '') {
									Ext.MessageBox.show({
										title: '$collaboration_errordlg_title',
										msg: '$collaboration_errordlg_msg',
										buttons: Ext.MessageBox.OK,
										icon: Ext.MessageBox.ERROR
									});
								}
								else {
								    // cleans up the comment title to display plain text in grid row.
									var newCommentTitle = newComment.replace(/<BR>/g, " ");	
									newCommentTitle = newCommentTitle.replace(/&nbsp;/g, "");
									newCommentTitle = newCommentTitle.replace(/<[^<>]+>/g, "");									
									if (newCommentTitle.length > 60) {
										newCommentTitle = newCommentTitle.slice(0,60)+ '...';
									}

									var currentTimeStamp = TimeManager.getAdjustedTime();
									var commentRecord = new InsertRecord({
									    commentId: '',
									    commentTitle: newCommentTitle,
									    comment: newComment,
									    userId: '$currentUserId',
									    user: '$currentUser',
									    timeStamp: currentTimeStamp,
									    timeStampDisplay: TimeManager.convertToLocaleDateTime(currentTimeStamp)
									});
				                	demandTable.commentsDS.insert(0,[commentRecord]);	
				                	demandTable.commentEditor.setValue("");
			                	}
			                }
				});
																
				demandTable.collaborationTabPanel = new Ext.Panel({
			        width: 650,
			        height: 371,
			        layout: 'form',
					frame:true,
			        labelAlign: 'top',
					waitMsgTarget: true,
					items: [
			            demandTable.commentEditor,
			            btnAddComment,
			            demandTable.discussionGridCtrl
					]
				});