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?

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?

• javascript
• templates
• extjs

2 Answers 2

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.

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