title: how to use EXTJS XTemplate in a menu?
body: <p>I am building a web app using EXTJS 4.2.2 , unfortunately I have to say my skills here are very poor. </p>
  
  <p>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.</p>
  
  <p>I started a <a href="http://jsfiddle.net/ragda_awad/kG47b/8/" rel="nofollow">jsfiddle</a>  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.</p>
  
  <p>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. </p>
  
  <pre><code> 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('&lt;tpl for="."&gt;',
           '&lt;ul class="details"&gt;',
           '&lt;li&gt;&lt;b&gt;{[this.userRenderer(values.user_id)]}&lt;/b&gt;',
           '&lt;p&gt;{notification_text}&lt;/p&gt;',
           '&lt;p&gt;{[this.timeRenderer(values.notification_time)]}&lt;/p&gt;',
           '&lt;/li&gt;',
           '&lt;/ul&gt;',
           '&lt;/tpl&gt;', {
           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'
       }]
   }]
  </code></pre>
  
  <p>});</p>