PDA

View Full Version : [ExtJS 2.2] Changing drag item text and/or appearance in Grid



crashedsnow
24 Feb 2009, 3:16 AM
Hi all,

I'm trying to change the appearance of the "dragged" item when dragging in a single row select grid. By default, it displays 'X rows selected', but I want it to display the text of the row being dragged.

I have a solution, but I was only able to implement it by digging around in various object properties obtained while debugging in a Firefox firebug debug, and I'm concerned that I may be tinkering with some inner workings.. and that's typically bad.

So I have a fairly standard GridPanel, and on the 'render' event I am creating an Ext.dd.DropZone. In the onContainerOver event of this DZ I am weaving some black magic to alter the appearance of the item being dragged.

I'd appreciate some advice as to whether this approach (code below) is appropriate (specifically accessing the 'ddel' element), and if not what is the preferred way to implement. Thanks!




// within the Ext.dd.DropZone...

onContainerOver:function(dd, e, data) {

// Get the row index
var source = data.rowIndex;

// Get the corresponding record from the grid's data source
var record = dataStore.getAt(source);

// Get the drag source data
var ddata = dd.getDragData(e);

// Start incanting the spell and sacrficing virgins...
if(ddata && ddata.ddel && record) {
// Access the 'ddel' property of the drag data

// Inject data from the record into the drag item
ddata.ddel.innerHTML = record.get('somefield');
ddata.ddel.className='SomeCSSClass';
}
}
...