PDA

View Full Version : View.refresh() triggers error in IE



wua22
31 May 2007, 4:13 AM
Hi all,

I have an example I'm working on that basically allows you to reorder a set of images using drag n drop. The set of images are created as a View and the ondragover handling will reorder the elements in the View as one image is dragged over another. At the end of the reordering I refresh() the view and this works in FireFox without issue.

However, in IE (both 6+7) I'm confronted with a htmlfile:Unspecified error. When debugging it in Visual Studio the line that is apparently causing the error is in ext-yui-adapter.js. The line being "b=el.getBoundingClientRect()" in the getXY function.

I've supplied a vastly simplified example below that shows the error. Just click on the 'enable drag' button, then drag 1 image over the other.

Any help would be much appreciated.

Thanks
Andy Wu



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>JsonView Example</title>

<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />

<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="lib/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="lib/ext/adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="lib/ext/ext-all.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="lib/ext/examples/examples.css" />

<script>

var enableDrag = function(){
// make the images in the jsonview draggable
var htmlEls = portfolioList.pview.getNodes(0,portfolioList.pview.store.getCount()-1);
for ( var j = 0; j < htmlEls.length; j++ ){
new SortableDragItem( htmlEls[j], portfolioList.pview, "portfolioDD" );
}
}

var portfolioList = function(){
this.pview = null;
this.store = null;

return {
init : function(){
var tpl = new Ext.Template(
'<div class="thumb-wrap" id="{id}">' +
'<div class="thumb"><img src="{url}" class="thumb-img"></div>' +
'<span>{name}</span></div>'
);

this.rec = Ext.data.Record.create( [
{"name":"name"},
{"name":"url"},
{"name":"shortName"},
{"name":"id"}
] );

this.store = new Ext.data.SimpleStore({
data:this.rec,
fields:["name","url","shortName","id"]
});

this.store.add( new this.rec( { name:"foobar", url:"http://extjs.com/forum/images/smilies/20.gif", id:"img1" } ) );
this.store.add( new this.rec( { name:"foobar", url:"http://extjs.com/forum/images/smilies/32.gif", id:"img2" } ) );

this.pview = new Ext.View("portfolio", tpl, {
multiSelect: true,
store: this.store
});


}
};
}();

Ext.onReady(portfolioList.init, portfolioList, true);

SortableDragItem = function(id, view, sGroup, config) {
SortableDragItem.superclass.constructor.call(this, id, sGroup, config);

// The proxy is slightly transparent
Ext.get(this.getDragEl()).setStyle('opacity', 0.67);

this.goingUp = false;
this.lastY = 0;
this.parentview = view;
};

Ext.extend(SortableDragItem, Ext.dd.DDProxy, {

startDrag: function(x, y) {
// make the proxy look like the source element
var dragEl = Ext.get(this.getDragEl());
var clickEl = Ext.get(this.getEl());

var padding = clickEl.getPadding('t') + 'px '
+ clickEl.getPadding('r') + 'px '
+ clickEl.getPadding('b') + 'px '
+ clickEl.getPadding('l') + 'px';

dragEl.dom.innerHTML = '<div style="padding:' + padding + '">' + clickEl.dom.innerHTML + '</div>';

dragEl.setStyle(clickEl.getStyles('background-color', 'color', 'padding'));
dragEl.setStyle('border', '1px solid gray');
},

endDrag: function(e) {
var srcEl = Ext.get(this.getEl());
var proxy = Ext.get(this.getDragEl());

// Hide the proxy and show the source element when finished with the animation
var onComplete = function() {
proxy.setStyle('visibility', 'hidden');
srcEl.setStyle('visibility', '');
};

// Show the proxy element and animate it to the src element's location
proxy.setStyle('visibility', '');
proxy.shift({
x: srcEl.getX(),
y: srcEl.getY(),
easing: 'easeOut',
duration: .2,
callback: onComplete,
scope: this
});
},

onDrag: function(e) {
},

onDragOver: function(e, id) {
// code to reorder view based on element the drag item is over

this.parentview.refresh();

return true;
}
});

</script>

</head>
<body>

<input type="button" value="Enable drag" onclick="enableDrag();">

<div id="portfolio" style="width: 100%; height: 300px; border: 1px solid black"></div>


</body>
</html>

nightowl
20 May 2008, 6:12 AM
I'm looking to create a Drag'nDrop tool that will allow to reorder images. From this post, I get that you were very close to realising it.
Did you manage to get there? Would you want to share your code, so that I can learn from it?

cirvine
29 May 2008, 7:37 AM
I'm having the same getBoundingClientRect() error on IE only, when the multiselect/itemselect user extension is used and the underlying store refreshed.

Any dataview used as a dropzone seems to have this problem. Has anyone figured out how to fix it yet?

TobiasS
4 Jul 2008, 2:53 AM
Got the same problem with a viewport.