PDA

View Full Version : Different work beetween browsers



DJ JJ
27 Dec 2010, 11:40 AM
Hi! I'm implementing a piece a code that is similar to this example from Saki: Free Drag with State. Code from the example works fine on all browsers, but mine has some problem: on Firefox and Safari it works very well without problems; on Chrome I can drag elements, but the state it's not saved; on IE8 I can't drag elements. This is a very strange thing, especially for Chrome (that use WebKit as Safari).
Here is my piece of code:


/*
* File: datFed.js
* Date: Sun Nov 14 2010 00:06:44 GMT+0100 (ora solare Europa occidentale)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file will be generated the first time you export.
*
* You should implement event handling and custom methods in this
* class.
*/

datFed = Ext.extend(datFedUi, {
initComponent: function() {
datFed.superclass.initComponent.call(this);
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
},

divs:[
{x:20, y:20}
,{x:80, y:20}
,{x:140, y:20}
,{x:200, y:20}
,{x:20, y:80}
,{x:80, y:80}
,{x:140, y:80}
,{x:200, y:80}
]

// save state on these events
,stateEvents:['move','resize','itemdrag']

// return also item coordinates as part of state
,getState:function() {
var state = Ext.Window.prototype.getState.call(this);
state.divs = this.divs;
return state;
}

// item creation template
,tpl: new Ext.XTemplate(
'<tpl for="divs">'
,'<div id="item-{#}" class="item draggable" style="top:{y}px;left:{x}px;"><img src="images/add.png"></div>'
,'</tpl>'
)

,afterRender:function() {
datFedUi.superclass.afterRender.apply(this, arguments);


this.tpl.overwrite(this.body, this);
// setup D&D
var items = this.body.select('div.draggable');

// loop through draggable items
items.each(function(el, ce, index) {

// create DDProxy
el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');

// configure the proxy
Ext.apply(el.dd, {
win:this
,itemIndex:index

// runs on drag start
// create nice proxy and constrain it to body
,startDrag:function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({border:'','z-index':this.win.lastZIndex + 1});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');

this.constrainTo(this.win.body);
} // eo function startDrag

// runs on drag end
// save new position of item and fire itemdrag event to save state
,afterDrag:function() {
var el = Ext.get(this.getEl());
var div = this.win.divs[this.itemIndex];
div.x = el.getLeft(true);
div.y = el.getTop(true);
this.win.fireEvent('itemdrag', this);
} // eo function afterDrag

}) // eo apply

}, this); // eo each

var bbb=this.body;
var dd = new Ext.dd.DropTarget(bbb, {
ddGroup:'treeDD'
,notifyDrop:function(dd, e, node) {
alert('ciao');
return true;
}
})}
});
Ext.reg('datFed', datFed);

29 Dec 2010, 10:56 AM
ok, what have you done to debug the issue? are you sure the right events are being fired? are you getting exceptions?

DJ JJ
5 Jan 2011, 7:50 AM
on Chrome all seems ok but it doesn't save the state... maybe have I to put the .setProvider in another position?? in IE, when I load the page all is ok, but when I try to drag objects I receive some errors in the file ext-all-debug.js on the line 4272 (in bold)


setStyle : function(prop, value){
var tmp,
style,
camel;
if (typeof prop != 'object') {
tmp = {};
tmp[prop] = value;
prop = tmp;
}
for (style in prop) {
value = prop[style];
style == 'opacity' ?
this.setOpacity(value) :
this.dom.style[chkCache(style)] = value;
}
return this;
},


so the problem may be the css, but it's the same of Saki:


div.item {
border:1px solid silver;
background-color:#f0f080;
width:40px;
height:40px;
text-align:center;
line-height:40px;
font-size:11px;
font-family:sans-serif;
position:absolute;
}
.draggable {
}
#win .x-window-body {
background-color:#f0f0f0 ! important;
position:relative;
}
.dd-proxy {
opacity:0.4;
-moz-opacity:0.4;
filter:alpha(opacity=40);
cursor:default ! important;
}