javascript 如何在 ExtJS 中使用 XTemplate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20067681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use XTemplate in ExtJS
提问by Alavaros
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:
我在定义视图时尝试使用 XTemplate，虽然我不知道我是否正确使用它，这是我的代码：
East.js
东方.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
我在另一个名为 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?
使用这段代码，我只能看到工具栏、西边和中心，而在我的东边视图中，只能看到第二项的 html 内容Actions。我究竟做错了什么？
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?
另一方面，我希望我的代码整洁，我希望在 store 文件夹中有 store 定义，在 view 文件夹中有视图，在 model 文件夹中有模型，我如何从我的 East 视图中调用这些代码部分？
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:
在 Store 中，更改id:'notiStore',并写入：
storeId: 'notiStore',
Is that correct? I tried it, but it doesn't work, what am I forgetting?
那是对的吗？我试过了，但它不起作用，我忘记了什么？
回答by Alavaros
The problem was that I was calling the view first. The solution for me is:
问题是我首先调用了视图。对我来说的解决方案是：
East.js
东方.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
通知.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??
可以看出，我在代码末尾定义了视图。它工作正常，但如果我尝试订购我的代码，我的意思是将模型放在 Model 文件夹中，存储在 Store 文件夹中，只保留模板和视图在这个文件中，我无法让它工作。有谁知道如何重写我的代码来获得它？
Greetings.
问候。
回答by rixo
You don't specify an xtypefor the first item. As a consequence, it uses the defaultType, and it's 'panel'. Panel does not support stores, it feeds either from its dataconfig option, or a data object that you pass with the updatemethod.
您没有xtype为第一项指定 an 。因此，它使用defaultType, 并且它是“面板”。Panel 不支持存储，它从其data配置选项或您通过该update方法传递的数据对象提供。
The component that binds a store to a custom XTemplate is the dataview. You'll need to use that instead of the panel.
将商店绑定到自定义 XTemplate 的组件是dataview。您需要使用它而不是面板。
Regarding your side question, you can see in the docs example for dataview that you can give an storeIdto your stores, and then use Ext.data.StoreManager#lookupto retrieve an instance of this store (they use idinstead of storeIdin 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.
关于您的附带问题，您可以在 dataview 的文档示例中看到，您可以storeId为您的商店提供一个，然后使用它Ext.data.StoreManager#lookup来检索该商店的一个实例（他们使用id而不是storeId在示例中，但似乎有点过时）。事实上，您甚至可以直接分配商店 ID 字符串（例如store: 'myStoreId'），并且 Ext 会为您调用 StoreManager。
