Question

我正在使用EXTJS 4.2.2构建一个Web应用程序，不幸的是我不得不说我的技能非常差。

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

我在这里开始jsfiddle试图实现我的目标。在通知菜单中我想要使用的是Xtemplate（菜单中的每个项目都是通知），此模板的存储是通知存储，其中包括其他字段： user_id，time_stamp，notification_text。只要商店以某种方式更改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'
                }
            ]
        }
    ]
});

如何在菜单中使用EXTJS XTemplate？

2 个答案: