如何在ExtJS中使用XTemplate [英] How to use XTemplate in ExtJS

问题描述

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

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:

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

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
  }]
});

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

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 for your answer. This would be the code as you said, right?

在视图中：

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

而在商店中，更改 id：'notiStore '，并写：

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?

推荐答案

问题是我正在调用视图第一。我的解决方案是：

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

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()
});

可以看出，我在代码末尾定义视图。它工作正常，但如果我尝试订购我的代码，我的意思是将模型放在Model文件夹中，存储在Store文件夹中，只留下该文件中的模板和视图，我无法使其工作。有没有人知道如何重写代码以获取它？

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??

问候。

这篇关于如何在ExtJS中使用XTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！