javascript - How to use XTemplate in ExtJS

Question

I'm trying to use XTemplate when I define a view, although I dont know if I'm using it properly, this is my code:

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

And I use this view in other view called 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
  }]
});

With this code, I can only see toolbar, west and center, and in my east view, only the html content of the second item, Actions. What am I doing wrong?

On the other hand I'd like to have my code tidy, I'd like to have store definitions in store folder, views in view folder and models in model folder, How can I call these portions of code from my East view?

Thanks in advance!

Greetings.

UPDATE:

Thanks for your answer. This would be the code as you said, right?

In View:

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

And in Store, change id:'notiStore', and write:

storeId: 'notiStore',

Is that correct? I tried it, but it doesn't work, what am I forgetting?

Answer 1

The problem was that I was calling the view first. The solution for me is:

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: [{
    xtype: 'notificationsView'
  }, {
    html: 'Actions'
  }]
});

Notifications.js

Ext.define('Notification', {
  extend: 'Ext.data.Model',
  fields: [
    { name:'src', type:'string' },
    { name:'from', type:'string' },
    { name:'date', type:'string' },
    { name:'content', type:'string' }
  ]
});

Ext.create('Ext.data.Store', {
  model: 'Notification',
  id: 'notiStore',
  data: [
    { src:'resources/img/east/ic_new_mail_grey01.png', from:'De H24', date:'24/04/2013 11:00', content:'Recordatorio: falta sólo una hora para la generación de informes semalaes.' },
  { src:'resources/img/east/ic_to_associate_alarma_grey.png', from:'A20132404-0002', date:'24/04/2013 10:55', content:'Alerta asignada al operador MyApp' }
  ]
});

var notiTpl = new Ext.XTemplate(
  '<tpl for=".">',
    '<div class="thumb-wrap">',
      '<div class="notImg">',
        '<img src="{src}" />',
      '</div>',
      '<div style="float:left; width:90%; padding: 5px;">',
        '<div>',
          '<span>{from}</span>',
          '<span style="float:right;">{date}</span>',
        '</div>',
        '<div>',
          '<span>{content}</span>',
        '</div>',
      '</div>',
    '</div>',
  '</tpl>'
);

Ext.define('MyApp.view.main.east.Notificaciones', {
  extend: 'Ext.view.View',
  alias: 'widget.notificacionesView',
  padding: 5,

  store: 'notiStore',
  tpl: notiTpl,
  itemSelector: 'div.thumb-wrap',
  emptyText: 'No images available',
  renderTo: Ext.getBody()
});

As can be seen, I'm defining the view at the end of the code. It works fine, but if I try to order my code, I mean putting the model in Model folder, store in Store folder and leave only the template and the view in this file, I'm unable to make it work. Does anybody know how to rewrite my code to get it??

Greetings.