PDA

View Full Version : Store.insert(): Invalid argument el.style[_19] in IE



wua22
4 Jun 2007, 7:44 AM
Hi,

I have a drag n drop example that reorders a set of images. 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. The reordering works by removing the selected element via Store.remove() and inserting it into it's new position via Store.insert().

This works fine in Firefox but fails with IE. The error reported is "Invalid argument" on the line 11 of yui-utilities:

el.style[_19]=val;

Where _19 is "left", val is "NaNpx" and el.style["left"] is "56px".

Any ideas are most appreciated!

I've included a full working example below that demonstrates the issue. Click the "Enable drag" button to enable the dragging.



<!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="{imgid}">' +
'<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":"id"}
] );

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

this.store.add( new this.rec( { name:"foobar", url:"http://extjs.com/forum/images/smilies/20.gif", imgid:"img1" } ) );
this.store.add( new this.rec( { name:"foobar", url:"http://extjs.com/forum/images/smilies/32.gif", imgid:"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) {
// Keep track of the direction of the drag for use during onDragOver
var y = e.getPageY();

if (y < this.lastY) {
this.goingUp = true;
} else if (y > this.lastY) {
this.goingUp = false;
}

this.lastY = y;
},

onDragOver: function(e, id) {
// code to reorder view
var DDM = Ext.dd.DragDropMgr;
var srcEl = Ext.get(this.getEl());
var destEl = Ext.get(id);

// don't need to change anything
if ( this.id == destEl.id ){
return true;
}

// get the id of the src element
var selectedIndex = -1;
// loop over the view.jsondata to find the element referred to
for ( var i = 0; i < this.parentview.store.getCount(); i++ ){
var f = this.parentview.store.getAt(i);
if ( this.parentview.store.getAt(i).data.imgid == ( this.id ) ){
selectedIndex = i;
break;
}
}

// remove selected item to insert elsewhere
var selectedJsonData = this.parentview.store.getAt(selectedIndex);
this.parentview.store.remove( selectedJsonData );


if (destEl.is('div#panel-portfolio')) {
// append selected item and append it to the end
this.parentview.jsonData.push( selectedJsonData );
}else {
// loop over the view.jsondata to find the dest element referred to
var destIndex = -1;

for ( var i = 0; i < this.parentview.store.getCount(); i++ ){
if ( this.parentview.store.getAt(i).data.imgid == ( destEl.id ) ){
destIndex = i;
break;
}
}

if ( !this.goingUp ){
destIndex++;
}

// insert the data in the new position
this.parentview.store.insert(destIndex,selectedJsonData);
}

DDM.refreshCache();

// having refreshed the view, we need to recreate the SortableDragItems
var htmlEls = this.parentview.getNodes(0,this.parentview.store.getCount()-1);
for ( var j = 0; j < htmlEls.length; j++ ){
new SortableDragItem( htmlEls[j], this.parentview, "portfolioDD" );
}

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>

jack.slocum
4 Jun 2007, 2:38 PM
Can you run it with ext-all-debug so the error message is more useful? Thanks.

Also have you tried it with 1.1 beta?

wua22
5 Jun 2007, 2:25 AM
Thanks for the reply Jack.

Changing to ext-all-debug doesn't appear to make a difference since the error is in yui-utilities.

However, that doesn't matter since the 1.1 beta does the trick :)

Much appreciated.

Andy Wu