我正在使用ExtJS构建Web应用程序。在我的Web应用程序中，用户可以将照片上传到服务器目录。另外，我还将文件路径和用户ID一起保存到数据库表中，这样我就知道某张照片是谁的照片。当然，我也希望他们能够查看它。我可以根据登录用户正确获取数据库行。但是，我现在遇到的困难涉及向用户显示他或她的照片。
[在网上搜索时，我由Sencha提供saw this example。看了一下代码，似乎很容易集成到我现有的应用程序中。
[检查提供的data-view.js file后，我发现它使用了ext/src/ux/子目录中已经提供的2个插件，因此我看不到添加它们的目的，并且我的app.js文件看起来像这样：
requires: [
'Ext.Loader',
'Ext.layout.container.Absolute',
'Ext.layout.container.Column',
'Ext.grid.*',
'Ext.ux.DataView.DragSelector',
'Ext.ux.DataView.LabelEditor'
],
现在，我也有自己的模特和商店。
我的模型看起来像：
Ext.define('LLOYDS_LMA.model.ciGallery', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'image_path'
},
{
name: 'description'
},
{
name: 'upload_date'
},
{
name: 'upload_time'
}
]
});
而且我的商店看起来像是用于对数据库进行CRUD的标准商店。
现在，为了创建照片库示例，我要做的是获得要在其中显示照片库的面板，并为其afterrender属性创建一个函数。在那之后的渲染功能中，我基本上要做的是从Ext.create(....
看起来像这样：
var store = Ext.getStore("ciGallery");
Ext.create('Ext.Panel', {
id: 'images-view',
frame: true,
collapsible: true,
width: 200,
renderTo: 'dataview-example',
title: 'Simple DataView (0 items selected)',
items: Ext.create('Ext.view.View', {
store: store,
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
],
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
],
prepareData: function(data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.image_path, 15),
sizeString: Ext.util.Format.fileSize(data.upload_date),
dateString: Ext.util.Format.date(data.upload_time)
});
return data;
},
listeners: {
selectionchange: function(dv, nodes ){
var l = nodes.length,
s = l !== 1 ? 's' : '';
this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
}
}
})
});
ciGallery是我的商店，dataview-example是父面板的id属性，以及对prepareData函数的调整以匹配我使用的模型的属性。
但是，当我运行我的应用程序并转到该面板时，似乎没有任何东西可以正确渲染，因为我什么也看不见，甚至没有空白面板。
我认为要使其正常工作，需要在callParent初始化您的类之后在initComponent方法中创建嵌入式DataView。
因为我经常使用这种类型的视图，所以我创建了一个基类'DataPanel'，该基类处理了大多数此设置，然后仅在需要时才通过该类派生特定于模板的详细信息。
这是我实际实现中的示例代码。
1）创建一个单独的包含文件，名为'YourNamespace.view.DataPanel.js'，其中包含以下代码：
Ext.define('YourNamespace.view.DataPanel', {
extend: 'Ext.panel.Panel'
, alias: 'widget.dataPanel'
, title: ''
, initTitle: ''
, appendRecordToTitle: true
, emptyText: undefined
, itemSelector: ''
, layout: 'fit'
, store: ''
, tpl: ''
, autoWidth: true
, overflowY: 'auto'
, initComponent: function () {
this.callParent(arguments);
this.initTitle = this.title;
var dataView = new Ext.DataView({
emptyText: this.emptyText ? this.emptyText : 'No Items Available.'
, title: this.initTitle
, itemSelector: this.itemSelector
, loadMask: false
, overItemCls: 'x-view-over'
, store: this.store
, tpl: this.tpl
, style: 'padding: 5px'
, width: '100%'
, listeners: {
selectionchange: function(dataview, selection) {
this.up().fireEvent('selectionchange', dataview, selection);
}
}
});
this.add(dataView);
}
, refreshTitle: function (recordTitle) {
if (this.appendRecordToTitle) {
this.setTitle(this.initTitle + ' ' + recordTitle);
}
}
, reset: function() {
}
});
2）这是显示此基类用法的示例：
Ext.define('YourNamespace.view.EmployeePhotoPanel', {
extend: 'YourNamespace.view.DataPanel'
, alias: 'widget.employeeSearchResultsPanel'
, minHeight: 600
, itemSelector: 'div.employee'
, store: Ext.create('YourNamespace.store.Employees')
, title: 'Search Results'
, tpl: new Ext.XTemplate(
'<tpl for=".">'
, '<div class="employee">'
, '<img src="/employee/photo?id={employeeNumber}&scale=thumbnail")">'
, '<div class="displayLabel">{displayName:ellipsis(20)}</div>'
, '</div>'
, '</tpl>'
)
, load: function(searchCriteria) {
this.store.load({
params: {
'$filter': searchCriteria
}
, scope: this
})
}
}
);
3）此示例的模型可能看起来像这样：
Ext.define('YourNamespace.model.Employee', {
extend: 'Ext.data.Model'
, requires: ['Ext.data.proxy.Rest']
, idProperty: 'employeeNumber'
, fields: [
'employeeNumber', 'displayName'
]
, proxy: {
type: 'rest'
, url: '/employee/record/summary'
}
});
4）商店很简单：
Ext.define('YourNamespace.store.Employees', {
extend: 'Ext.data.Store'
, model: 'YourNamespace.model.Employee'
});
5）使它看起来正确的.css：
.employee {
background-color: #F7F7F9;
text-align: center;
vertical-align: bottom;
border: 1px outset #D0D0D0;
padding: 4px;
margin: 2px;
float: left;
display: inherit;
overflow: hidden;
font: normal .8em Arial;
height: 130px;
width: 108px;
}
.employee .displayLabel {
white-space: nowrap;
overflow: hidden;
color: #000000;
}
.employee:hover{
border:1px solid red;
}
6）您将在控制器中的某个位置调用存储加载方法。该调用应自动使用信息填充您的DataView。此示例模板具有一个嵌入式html img标记，该标记针对每个存储记录向服务器进行一次静态调用，以返回组成图像文件的字节。如果您有静态图片，请修改模板以直接指向图片网址（甚至可以在模型记录中返回网址）。
希望这会有所帮助！
好。这就是我所做的。 View和Panel组件可在Sencha Architect中获得。我只是将它们添加到要放入图库的面板上，然后从示例到组件设置尽可能多的属性。我认为我唯一没有使用的是示例中View的renderTo属性。
现在，创建视图时，必须调整tpl代码以及prepareData函数以匹配商店使用的模型。这是我对tpl所做的操作：
tpl: [
'<tpl for=".">',
'<div class="thumb"><img src="{image_path}"></div>',
'</tpl>',
'<div class="x-clear"></div>',
''
]
我使用了一个简单的图片库，与示例显示的相反（它具有文件名）。为此，我仅删除了其他div和span对象。