PDA

View Full Version : DDView and wrapped template item



t800t8
20 Oct 2009, 11:33 PM
I create a DDView (the one is included in Multiselect 3.0) as below


this.selectorView = new Ext.ux.DDView({
emptyText: 'No themes to display',
itemSelector: 'div.theme-item',
trackOver: true,
dragGroup: 'selectorViewDropZone',
dropGroup: 'selectorViewDropZone',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="theme-item">',
'<table class="theme-item-table" cellspacing="5">',
'<tr>',
'<td width="65px" valign="top">',
'<img class="theme-detail-metadata-preview" src="{metadata_preview}" />',
'</td>',
'<td class="theme-detail-content" valign="top">',
'{metadata_provider}<br/>',
'<span class="theme-detail-metadata-abstract">{name}</span><br/>',
'{metadata_abstractText}',
'</td>',
'<td width="70px" valign="top">',
'<table cellspacing="6">',
'<tr>',
'<td>',
'<button id="details-theme-{id}" style="display: none" class="theme-detail-button"></button>',
'</td>',
'<td>',
'<button id="remove-theme-{id}" style="display: none" class="theme-remove-button"></button>',
'</td>',
'</tr>',
'<tr>',
'<td>&nbsp;</td>',
'<td>',
'<button id="more-theme-{id}" style="display: none" class="theme-more-button"></button>',
'</td>',
'</tr>',
'</table>',
'</td>',
'</tr>',
'</table>',
'</div>',
'</tpl>'
),
listeners: {
click: SpatialMap.Function.bind(function(view, index, item, evt) {
var target = evt.getTarget();

this.currentThemeIndex = index;

if (target.tagName == 'BUTTON') {
if (target.id.startsWith('details-theme-')) {
this.showDetailsPanel();
}

if (target.id.startsWith('remove-theme-')) {
Ext.Msg.confirm('Warning', 'Are you sure to remove this theme?', SpatialMap.Function.bind(function(btn, text) {
if (btn == 'yes') {
this.selectorView.store.removeAt(index);
}
}, this));
}
}
}, this),
mouseenter: this.onMouseEnterDataViewItem,
mouseleave: this.onMouseLeaveDataViewItem
}
});it works properly. But if I wrap the template item by a DIV



'<div>',
'<tpl for=".">',
'<div class="theme-item">',
'<table class="theme-item-table" cellspacing="5">',
'<tr>',
'<td width="65px" valign="top">',
'<img class="theme-detail-metadata-preview" src="{metadata_preview}" />',
'</td>',
'<td class="theme-detail-content" valign="top">',
'{metadata_provider}<br/>',
'<span class="theme-detail-metadata-abstract">{name}</span><br/>',
'{metadata_abstractText}',
'</td>',
'<td width="70px" valign="top">',
'<table cellspacing="6">',
'<tr>',
'<td>',
'<button id="details-theme-{id}" style="display: none" class="theme-detail-button"></button>',
'</td>',
'<td>',
'<button id="remove-theme-{id}" style="display: none" class="theme-remove-button"></button>',
'</td>',
'</tr>',
'<tr>',
'<td>&nbsp;</td>',
'<td>',
'<button id="more-theme-{id}" style="display: none" class="theme-more-button"></button>',
'</td>',
'</tr>',
'</table>',
'</td>',
'</tr>',
'</table>',
'</div>',
'</tpl>',
'</div>'
when I drag & drop an item, it will be moved to the end of the list. Did I do anything wrong? Or is it DDView's bug?