如何在ExtJS中使用XTemplate

我在定义视图时尝试使用XTemplate，尽管我不知道我是否正确使用了它，但这是我的代码：

East.js

Ext.define('MyApp.view.main.East', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.eastView',
  requires: [
    'MyApp.view.main.east.Notifications'
    //'MyApp.view.main.east.Actions'
  ],
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  border: false,
  defaults: {
    flex: 1,
    border: false
  },
  items: [{
    store: myStore,
    tpl: notiTpl
  }, {
    html: 'Actions'
  }]
});
Ext.define('Notifications', {
  extend: 'Ext.data.Model',
  fields: [
    { name:'src', type:'string' },
    { name:'from', type:'string' },
    { name:'date', type:'string' },
    { name:'content', type:'string' }
  ]
});
var myStore = Ext.create('Ext.data.Store', {
  id:'notiStore',
  model: 'Notifications',
  data: [
    { src:'resources/img/east/img1.png', from:'from1', date:'24/04/2013 11:00',
        content:'Bla bla bla.' },
    { src:'resources/img/east/img2.png', from:'A20132404-0002', date:'24/04/2013 10:55',
        content:'Bla bla bla' }
  ]
});
var notiTpl = new Ext.XTemplate(
  '<tpl for=".">',
    '<div class="thumb-wrap">',
      '<div class="notImg">',
        '<img src="{src}" />',
      '</div>',
      '<div style="float:left; width:90%;">',
        '<div>',
          '<span>{from}</span>',
          '<span style="float:right;">{date}</span>',
        '</div>',
        '<div>',
          '<span>{content}</span>',
        '</div>',
      '</div>',
    '</div>',
  '</tpl>'
);

我在另一个名为Main.js

Ext.define('MyApp.view.Main' , {
  extend: 'Ext.panel.Panel',
  alias: 'widget.mainView',
  requires: [
    'MyApp.view.main.Toolbar',
    'MyApp.view.main.West',
    'MyApp.view.main.Center',
    'MyApp.view.main.East'
  ],
  layout: {
    type: 'border',
    border: false
  },
  defaults: {
    autoScroll: true,
  },
  items: [{
    region: 'north',
    xtype: 'toolbarView'
  }, {
    region: 'west',
    width: 250,
    xtype: 'westView'
  }, {
    region: 'east',
width: 250,
    xtype: 'eastView'
  }, {
    region: 'center',
    xtype: 'centerView',
    border: true
  }]
});

有了这段代码，我只能看到工具栏的西部和中部，在东部视图中，只能看到第二个项目Actions的html内容。我做错了什么？

另一方面，我希望我的代码整洁，我希望在商店文件夹中有商店定义，在视图文件夹中有视图，在模型文件夹中有模型，我如何从我的East视图调用这些代码部分？

提前感谢！

问候。

更新：

谢谢你的回答。这就是你说的代码，对吧？

视图中：

items: [{
  xtype: 'dataview',
  store: 'notiStore',
  tpl: notiTpl
}, {
  html: 'Actions'
}]

在Store中，更改id:'notiStore',并写入：

storeId: 'notiStore',

这是正确的吗？我试过了，但没用，我忘了什么？