我正在尝试在 Tapanel 中呈现数据视图。
Ext.define('App.ImageView', {
extend:'Ext.panel.Panel',
alias:'widget.imageview',
id: 'images-view',
frame: true,
collapsible: true,
width: 535,
renderTo: 'dataview-example',
title: 'Simple DataView (0 items selected)',
items: Ext.create('Ext.view.View', {
store: store,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-item x-title">{name}</div>',
'<tpl for="children">',
'<div class="x-item x-item-child">{name}</div>',
'</tpl>',
'</tpl>'
),
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: '.x-item',
emptyText: 'No images to display',
onItemSelect: function(record) {
var node = this._selectedNode; //this.getNode(record);
if (node) {
Ext.fly(node).addCls(this.selectedItemCls);
}
},
onItemDeselect: function(record) {
var node = this._deselectedNode; //this.getNode(record);
if (node) {
Ext.fly(node).removeCls(this.selectedItemCls);
}
},
processItemEvent: function(record, item, index, e) {
console.log(e.type);
if (e.type == "mousedown" && e.button == 0) {
this._deselectedNode = this._selectedNode;
this._selectedNode = item;
}
},
updateIndexes : function(startIndex, endIndex) {
var ns = this.all.elements,
records = this.store.getRange(),
i, j;
startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
for(i = startIndex, j = startIndex - 1; i <= endIndex; i++){
if (!Ext.fly(ns[i]).is('.x-item-child')) {
j++;
}
ns[i].viewIndex = i;
ns[i].viewRecordId = records[j].internalId;
if (!ns[i].boundView) {
ns[i].boundView = this.id;
}
}
}
})
});
` Ext.create('Ext.tab.Panel', { width: 400, height: 400, renderTo: document.body, items: [{ title: 'Foo',xtype:'imageview' }, { title: 'Bar ', tabConfig: { title: '自定义标题', tooltip: '按钮工具提示' } }] });
ImageModel = Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name'},
{name: 'children'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ImageModel',
data: [
{
id: 1,
name: 'Parent #1',
children: [ { id: 11, name: 'Child 1.1' }, { id: 12, name: 'Child 1.2' }]
},
{
id: 2,
name: 'Parent #2',
children: [ { id: 21, name: 'Child 2.1' }, { id: 22, name: 'Child 2.2' }]
}
]
});`
问题是未呈现数据视图。有什么想法吗?