how to use EXTJS XTemplate in a menu?

Question

I am building a web app using EXTJS 4.2.2 , unfortunately I have to say my skills here are very poor.

I have a toolbar which is a horizontal menu (profile, buttton, notifications list, options list, about , help ..etc), one of the buttons in this menu is supposed to be a drop-down menu for notifications, to show something like in Facebook notification menu.

I started a jsfiddle here trying to achieve my goal. In the notification menu what I want to use is an Xtemplate (each item in the menu is a notification), the store of this template is the notifications store which among other fields is suppose to have: user_id, time_stamp , notification_text. Whenever the store changes the xtempalte changes in certain way but eventually a list of notifications is displayed.

As I said before my EXTJS skills very poor and I dont know if I started right or not, I need to know where shoudl I place my tpl ( Xtemplate) and how to connect it to the store, please help.

 var tb = new Ext.Toolbar({
 renderTo: document.body,
 width: 600,
 height: 100,
 items: [{
     text: 'Notifications',
     icon: 'fa-bell-o',
     itemId: 'notificationsMenu',
     menu: [
     new Ext.XTemplate('<tpl for=".">',
         '<ul class="details">',
         '<li><b>{[this.userRenderer(values.user_id)]}</b>',
         '<p>{notification_text}</p>',
         '<p>{[this.timeRenderer(values.notification_time)]}</p>',
         '</li>',
         '</ul>',
         '</tpl>', {
         userRenderer: function (userId) {
            //.. return a name instead of id
             return 'userName';
         },
         {
         timeRenderer: function (timeStamp) {
            //.. return time in some format
             return timeStamp;
         }
     })]
 }, {
     text: 'Options',
     iconCls: 'settings-icon',
     menu: [{
         text: 'Admin'
     }, {
         text: 'Change Passowrd'
     }, {
         text: 'Language'
     }]
 }]

});

Answer 1

I used dataview, this way I can specify my own store and add events later.

var dataview = new Ext.view.View({
store: mystore,
tpl: ['<tpl for=".">',
      '<ul class="notification-list">',
      '<li class="notification"><b>{[this.userRenderer(values.user)]}</b>',
      '<p>{text}</p>',
      '<p>{[this.timeRenderer(values.time)]}</p>',
      '</li>',
      '</ul>',
      '</tpl>', {
          userRenderer: function (user) {
              //.. return a name instead of id
              return user;
          }
      }, {
          timeRenderer: function (timeStamp) {
              //.. return time in some format
              return timeStamp;
          }
      }]});


var tb = new Ext.Toolbar({
 renderTo: document.body,
 width: 600,
 height: 100,
 items: [{
     text: 'Notifications',
     icon: 'fa-bell-o',
     itemId: 'notificationsMenu',
     menu: {

         plain: true,
         items: [dataview]

     }
 }, {
     text: 'Options',
     iconCls: 'settings-icon',
     menu: [{
         text: 'Admin'
     }, {
         text: 'Change Passowrd'
     }, {
         text: 'Language'
     }]}]});