如何在菜单中使用 EXTJS XTemplate？

Question

我正在使用 EXTJS 4.2.2 构建一个网络应用程序，不幸的是我不得不说我在这里的技能很差。

我有一个工具栏，它是一个水平菜单（配置文件、按钮、通知列表、选项列表、关于、帮助..等），此菜单中的一个按钮应该是通知的下拉菜单，在 Facebook 通知菜单中显示类似的内容。

我在这里创建了jsfiddle，试图实现我的目标。在通知菜单中，我想要使用的是一个 Xtemplate（菜单中的每个项目都是一个通知），这个模板的存储是通知存储，其中应该有： 用户 ID、时间戳、通知文本。每当商店更改时，xtempalte 都会以某种方式更改，但最终会显示通知列表。

正如我之前所说，我的 EXTJS 技能非常差，我不知道我是否开始正确，我需要知道我应该将我的 tpl（Xtemplate）放在哪里以及如何将它连接到商店，请帮助。

 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

我使用了dataview，这样我可以指定我自己的商店并在以后添加事件。

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'
     }]}]});

Answer 2

尝试将 tpl 放在面板中， 还应提供数据

var tb = new Ext.Toolbar({
    renderTo: document.body,
    width: 600,
    height: 100,
    items: [
        {
            text: 'Notifications',
            icon: 'fa-bell-o',
            itemId: 'notificationsMenu',
            menu: {
                xtype: 'menu',
                plain: true,
                items: [
                    {
                      xtype:'panel',
                        data: [
                            {notification_text: 'notification0'},
                            {notification_text: 'notification1'},
                            {notification_text: 'notification2'},
                            {notification_text: 'notification3'}
                        ],
                        tpl: ['<tpl for=".">',
                              '<p>{notification_text}</p>',
                              '</tpl>']
                    }
                ]

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