Question

我在定义视图时尝试使用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
  }]
});

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

另一方面，我想让我的代码整洁，我想在商店文件夹，视图文件夹中的视图和模型文件夹中的模型中存储定义，如何从我的东部调用这些代码部分查看？

提前致谢！

问候。

更新：

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

在视图中：

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

在商店中，更改id:'notiStore',并写下：

storeId: 'notiStore',

这是对的吗？我尝试过，但它不起作用，我忘记了什么？

Answer 1

问题是我先调用了视图。我的解决方案是：

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

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

问候。

Answer 2

您没有为第一项指定xtype。因此，它使用defaultType，它是'panel'。 Panel不支持商店，它通过其data配置选项或使用update方法传递的数据对象提供。

将商店绑定到自定义XTemplate的组件是dataview。您需要使用它而不是面板。

关于您的附带问题，您可以在数据视图的文档示例中看到您可以向商店提供storeId，然后使用Ext.data.StoreManager#lookup来检索此商店的实例（他们使用{ {1}}而不是示例中的id，但似乎有点弃用）。实际上，您甚至可以直接分配商店ID字符串（例如storeId），而Ext会很友好地为您调用StoreManager。

如何在ExtJS中使用XTemplate

2 个答案: