How To Use Xtemplate In Extjs

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.

Solution 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.

Solution 2:

You don't specify an xtype for the first item. As a consequence, it uses the defaultType, and it's 'panel'. Panel does not support stores, it feeds either from its data config option, or a data object that you pass with the update method.

The component that binds a store to a custom XTemplate is the dataview. You'll need to use that instead of the panel.

Regarding your side question, you can see in the docs example for dataview that you can give an storeId to your stores, and then use Ext.data.StoreManager#lookup to retrieve an instance of this store (they use id instead of storeId in the example, but it seems kinda deprecated). In fact, you can even assign the store id string directly (e.g. store: 'myStoreId'), and Ext will be kind enough do call the StoreManager for you.