PDA

View Full Version : DropZone creation in IE



John Sourcer
13 Oct 2009, 12:33 AM
Anybody have any idea on this? The dropZone creates fine on FF and Chrome and works as expected. In IE8 notifyOver doesn't fire even though the dropZone id etc looks right.:((




var dropZone = new Ext.dd.DropZone(this.getView().scroller, {
ddGroup: ddGroupId,
notifyOver: function(dd, evt, data){
console.log('over');
var cls = this.dropNotAllowed;
var draggedRecord = dd.dragData.selections[0];
var target = evt.getTarget();
var rowIndex = this.getView().findRowIndex(target);
var overRecord = this.getStore().getAt(rowIndex);

if (canDrop(draggedRecord, overRecord)) {
cls = Ext.dd.DropZone.prototype.dropAllowed;
}

return cls;
}.createDelegate(this),

Animal
13 Oct 2009, 12:39 AM
Have you stepped through it to see that what you think is going to happen is actually happening?

Like what this.getView().scroller returns at the point that is executed?

John Sourcer
13 Oct 2009, 12:54 AM
Thanks for replying, Animal.

I'm using developer tools in IE8 is there a better option for stepped debugging under IE8?

John Sourcer
13 Oct 2009, 1:12 AM
Have you stepped through it to see that what you think is going to happen is actually happening?

Like what this.getView().scroller returns at the point that is executed?

Using IE8 Debugger I have yes. It returns the body of x-grid3 which is correct?

John Sourcer
13 Oct 2009, 1:21 AM
!

It doesn't!

<div id="ext-gen332" class="x-grid3-scroller" style="width: 998px; height: 294px;">
<div id="ext-gen333" class="x-grid3-body">

IE returns: ext-gen332

FF it returns: ext-gen333

:-?

John Sourcer
13 Oct 2009, 5:52 AM
:((

No they don't. They refer the same object. Always. Yet in IE notifyOver doesn't fire. WTFF!

Animal
13 Oct 2009, 6:42 AM
You need to show more code

13 Oct 2009, 7:27 AM
is the grid view in the DOM when this is executed?

John Sourcer
13 Oct 2009, 11:58 AM
I've have a suspicion it isn't. But could it be in the DOM in FF and not in IE?

And thanks for the replies and all the work you guys do on the forums and elsewhere.

13 Oct 2009, 11:59 AM
Fx is a lot more forgiving than IE when it comes to certain things.

hendricd
13 Oct 2009, 2:18 PM
@John-- When are you defining the dropZone?

In the Grid's render or afterrender event?

John Sourcer
13 Oct 2009, 10:59 PM
@John-- When are you defining the dropZone?

In the Grid's render or afterrender event?

You had me well excited there, Hendric. I was doing it on render, moved to after render and nada. I really thought we had something, you and I :(

Animal
13 Oct 2009, 11:49 PM
You need to use the viewready event

John Sourcer
13 Oct 2009, 11:54 PM
Thanks Animal. That fails in FF as well. Here is a bit more code. I'm flailing in the dark here.



afterRender: function(){
Ext.ux.maximgb.treegrid.GridPanel.superclass.afterRender.apply(this, arguments);
var store = this.store;
if (this.enableDragDrop != false) {

var ddGroupId = this.id + '-dd-group';
var dragZone = new Ext.grid.GridDragZone(this, {
ddGroup: ddGroupId
});

var dropZone = new Ext.dd.DropZone(this.getView().scroller, {
ddGroup: ddGroupId,
notifyOver: function(dd, evt, data){

console.log('Eureka');

}.createDelegate(this),

Animal
13 Oct 2009, 11:56 PM
You need to do it in a handler of the viewready event.

John Sourcer
14 Oct 2009, 1:53 AM
Animal, I hate dragging you around like this. But I tried the following and even that fails on IE where it works on FF. I really do appreciate the assistance




afterrender: function(){

Ext.ux.maximgb.treegrid.GridPanel.superclass.afterrender.apply(this, arguments);
var store = this.store;
var view = this.getView();
var grid = this;

view.on({
viewready: {
fn: function(){

if (grid.enableDragDrop != false) {

var canDrop = function(draggedRecord, overRecord) {

if (Ext.isEmpty(overRecord)){
return true;
}
if (store.getNodeParent(draggedRecord) === overRecord) {
return false;
}
if (overRecord === draggedRecord) {
return false;
}
if (overRecord.isNew) {
return false;
}

var index = store.getNodeAncestors(overRecord).indexOf(draggedRecord);
return index < 0;
};

var ddGroupId = grid.id + '-dd-group';
var dragZone = new Ext.grid.GridDragZone(grid, {
ddGroup: ddGroupId
});

var dropZone = new Ext.dd.DropZone(view.scroller, {
ddGroup: ddGroupId,
notifyOver: function(dd, evt, data){

var cls = grid.dropNotAllowed;
var draggedRecord = dd.dragData.selections[0];
var target = evt.getTarget();
var rowIndex = grid.getView().findRowIndex(target);
var overRecord = grid.getStore().getAt(rowIndex);

if (canDrop(draggedRecord, overRecord)) {
cls = Ext.dd.DropZone.prototype.dropAllowed;
}

return cls;
}.createDelegate(grid),
notifyDrop: function(dd, evt, data){

var draggedRecord = dd.dragData.selections[0];
var target = evt.getTarget();
var rowIndex = view.findRowIndex(target);
var overRecord = grid.getStore().getAt(rowIndex);
var candrop = canDrop(draggedRecord, overRecord);

if (candrop) {
if (overRecord) {
var fn = function(){

var store = grid.getStore();
var parentId = overRecord.get('id');

draggedRecord.set(store.parent_id_field_name, parentId);

store.applyTreeSort();
grid.getSelectionModel().deselectRange();
grid.getSelectionModel().selectRecords([draggedRecord], false);
view.refresh(true);
grid.calculateGrid();

}.createDelegate(grid);

var expanded = grid.store.isExpandedNode(overRecord);
if (!expanded) {
var store = grid.getStore();
store.expandNode(overRecord);
store.setActiveNode(overRecord);
fn();
}
else {
fn();
}
}
else {
var store = grid.getStore();
draggedRecord.set(store.parent_id_field_name, null);
store.applyTreeSort();
grid.getSelectionModel().deselectRange();
grid.getSelectionModel().selectRecords([draggedRecord], false);
view.refresh(true);

}
return true;
}
}.createDelegate(grid)
});

grid.dropZone = dropZone;
}
}
}
});

hendricd
14 Oct 2009, 3:16 AM
@John--

The viewready event is raised on the GridPanel class, not the GridView.

Try again.

John Sourcer
14 Oct 2009, 3:38 AM
Hey Hendric, doesn't seem to fire. Which probably means I'm doing it wrong. Is it documented?

Animal
14 Oct 2009, 4:13 AM
It's recently added. Are you on the latest release?

hendricd
14 Oct 2009, 5:34 AM
@John --

Since few are sure what release the 'viewready' event will appear in, let's just accomodate the future a bit:



Ext.override (Ext.grid.GridView ,{
afterRender : function(){
if(!this.ds || !this.cm){
return;
}
this.mainBody.dom.innerHTML = this.renderRows() || ' ';
this.processRows(0, true);

if(this.deferEmptyText !== true){
this.applyEmptyText();
}
this.grid.events.viewready || this.grid.addEvents('viewready');
this.grid.fireEvent('viewready', this.grid, this);
}
});
Then define your dropZone in the GridPanel's new viewready event:


yourGrid.on( 'viewready', function(grid, view) {
if (grid.enableDragDrop != false) {
var canDrop = function(draggedRecord, overRecord) {
if (Ext.isEmpty(overRecord)) {
return true;
}
if (store.getNodeParent(draggedRecord) === overRecord) {
return false;
}
if (overRecord === draggedRecord) {
return false;
}
if (overRecord.isNew) {
return false;
}
var index = store.getNodeAncestors(overRecord).indexOf(draggedRecord);
return index < 0;
};
var ddGroupId = grid.id + '-dd-group';
var dragZone = new Ext.grid.GridDragZone(grid, {
ddGroup: ddGroupId
});
var dropZone = new Ext.dd.DropZone(view.scroller, {
ddGroup: ddGroupId,
notifyOver: function(dd, evt, data) {
var cls = this.dropNotAllowed;
var draggedRecord = dd.dragData.selections[0];
var target = evt.getTarget();
var rowIndex = this.getView().findRowIndex(target);
var overRecord = this.getStore().getAt(rowIndex);
if (canDrop(draggedRecord, overRecord)) {
cls = Ext.dd.DropZone.prototype.dropAllowed;
}
return cls;
}.createDelegate(grid),
notifyDrop: function(dd, evt, data) {
var draggedRecord = dd.dragData.selections[0];
var target = evt.getTarget();
var view = this.getView();
var rowIndex = view.findRowIndex(target);
var overRecord = this.getStore().getAt(rowIndex);
var candrop = canDrop(draggedRecord, overRecord);
if (candrop) {
if (overRecord) {
var fn = function() {
var store = this.getStore();
var parentId = overRecord.get('id');
draggedRecord.set(store.parent_id_field_name, parentId);
store.applyTreeSort();
this.getSelectionModel().deselectRange();
this.getSelectionModel().selectRecords([draggedRecord], false);
this.getView().refresh(true);
this.calculateGrid();
}.createDelegate(this);
var expanded = grid.store.isExpandedNode(overRecord);
if (!expanded) {
var store = grid.getStore();
store.expandNode(overRecord);
store.setActiveNode(overRecord);
fn();
} else {
fn();
}
} else {
var store = grid.getStore();
draggedRecord.set(store.parent_id_field_name, null);
store.applyTreeSort();
grid.getSelectionModel().deselectRange();
grid.getSelectionModel().selectRecords([draggedRecord], false);
view.refresh(true);
}
return true;
}
}.createDelegate(grid)
});
grid.dropZone = dropZone;
}
}
}
});but, you'll need to resolve 'store', as I dont know where that is really coming from. :-?
And, your callbacks are not taking advantage of the createDelegate directives you've got going.

Get organized!

John Sourcer
15 Oct 2009, 12:50 AM
Doug,

Implemented without success. Notifyover still only fire in FF and Chrome not in IE8. The store in question is the grid store, the delegate callback issue was my ignorance which is ...ummm...not in question.

John Sourcer
20 Oct 2009, 12:36 AM
Anybody shed some light on why the alert doesn't fire in IE?


<script type="text/javascript">

Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'images/s.gif';

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
];

var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

store.loadData(myData);

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
enableDragDrop: true
});

grid.on( 'viewready', function(grid, view) {

if (grid.enableDragDrop != false) {

var ddGroupId = grid.id + '-dd-group';
var dragZone = new Ext.grid.GridDragZone(grid, {
ddGroup: ddGroupId
});

var dropZone = new Ext.dd.DropZone(view.scroller, {
ddGroup: ddGroupId,
notifyOver: function(dd, evt, data) {
alert('over');
}.createDelegate(grid)
});
grid.dropZone = dropZone;
}
});

grid.render('grid-example');
});

</script>
<div id="grid-example">
</div>

22 Oct 2009, 9:29 AM
my first question: why are you creating a new drag zone?

After you've answered why and have figured out that you can specify a DD Group, configure the grid to that DD group and try again.

John Sourcer
27 Oct 2009, 4:13 AM
my first question: why are you creating a new drag zone?

After you've answered why and have figured out that you can specify a DD Group, configure the grid to that DD group and try again.

Ah yes! Thanking-you. Works perfectly now. 1 000 007 points awarded and closed. Where can I buy the book?

27 Oct 2009, 4:27 AM
Ah yes! Thanking-you. Works perfectly now. 1 000 007 points awarded and closed. Where can I buy the book?

:)

http://manning.com/garcia - i have 3 chapters left to produce. But the drag and drop with grids is all covered .