PDA

View Full Version : DataView.DragSelector



igcristian
1 Jul 2011, 4:15 AM
I'm trying to implement dataview DragSelector plugin, but without success. And I can not figure out what is the problem, it seems that the selection can be applied only if I start the drag from the button of each item (each item have about 100px and if I start the drag for more that 100px it's working).

For that I've set the dataview height 300 for letting me start the drag, but I really want it to work only with my items.

I've attached the code that I used in my application.

template:


'<table cellspacing="0" cellpadding="0" border="0">',
'<tr>',
'<td>',
'<div class="persoana-info">',
'<center>',
'<div><img src="resources/images/photos/' + rec.data.foto + '" width="60px"/></div>',
'<div><p style="font-family:Arial;font-size:11px; height:35px;text-overflow:ellipsis;"><b>' + rec.data.prenume + '<br/>' + rec.data.nume + '</b></p></div>',
'</center>',
'</div>',
'</td>',
'<td>',
'<div id="pers-' + rec.data.id + '" class="persoanaalocari-wrap" style="width:' + parseInt(Ext.data.StoreManager.lookup('Zile').getCount() * 42) + 'px">',
'<tpl for=".">',
'<div class="pers-zi-wrap">',
'<div id="pers-' + rec.data.id + '-{id}" class="pers-zi-wrap-day {[(this.nameOfDay(values["data_calendar"]) == "SA" || this.nameOfDay(values["data_calendar"]) == "DU")?"zi-sarbatoare":""]}">&nbsp;</div>',
'</div>',
'</tpl>',
'</div>',
'</td>',
'</tr>',
'</table>',
{
nameOfDay: function(date){
var weekday = new Array(7);
weekday[0]="DU";
weekday[1]="LU";
weekday[2]="MA";
weekday[3]="MI";
weekday[4]="JO";
weekday[5]="VI";
weekday[6]="SA";

return weekday[date.getDay()];
}
}
);



view:


var obj = Ext.create('Ext.view.View', {
store: 'Zile',
tpl: xtplPersoane,
multiSelect: true,
height: 300,
trackOver: true,
itemSelector: 'div.pers-zi-wrap-day',
selectedItemCls: 'saptselectedItem',
overItemCls: 'saptoverItem',
emptyText: 'No images to display',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
],
listeners: {
selectionchange: function(dv, nodes ){
var l = nodes.length,
s = l !== 1 ? 's' : '';
this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
}
}
});


Hope someone can give me a solution or point me to the good direction. Thanks.

Cristian