View Full Version : Prototype and Highlight

8 Apr 2007, 10:20 AM
I orginally posted this in the beta discussion group, but this is probably a better place.

I am integrating with the prototype/scriptacilious for my Rails app. When I attempt to use highlight() I get: Effect.Morph is not a constructor within the ext-prototype-adpapter.js file.

Any ideas? I double checked and I'm including the files in the proper order. Here is a snippet from my html file:

<script src="/javascripts/prototype.js?1175546771" type="text/javascript"></script>
<script src="/javascripts/effects.js?1175546771" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1175546771" type="text/javascript"></script>
<script src="/javascripts/controls.js?1175546771" type="text/javascript"></script>
<script src="/javascripts/application.js?1175546771" type="text/javascript"></script>

<script src="/javascripts/ext-prototype-adapter.js?1175483160" type="text/javascript"></script>
<script src="/javascripts/ext-all.js?1175483244" type="text/javascript"></script>

8 Apr 2007, 6:50 PM
You need to use Prototype 1.5 or later.

8 Apr 2007, 6:55 PM
I believe I am. The prototype.js file says the version is "1.5.0_rc0"


8 Apr 2007, 7:45 PM
That's an older version.
Try http://script.aculo.us/dist/scriptaculous-js-1.7.0.zip

9 Apr 2007, 5:49 AM
Ok that worked, but I found a larger problem. Before I was using YUI with a json reader and it would populate my grid just fine. However with prototype my grid would not populate. I simply changed my reader to the xmlreader and data worked with prototype how weird.

With prototype and the jsonreader i still received the data back. I tested this by using a ds.on("load") event.

Any thoughts?

9 Apr 2007, 5:56 AM
On further review when using the jsonreader with prototype. Although the correct number of rows are returned there is no data. I have this simple event handler:

ds.on('load', function(){
for (i=0;i<ds.data.items.length;i++) {

With using prototype and json nothing appears in the alert, but simply changing to xmlreader i get the actual data to appear in the alert. Using YUI and json works just fine.

It probably doesn't matter but here is the two different readers:

proxy: new Ext.data.HttpProxy({url: '/dashboard/xml',method:'get'}),
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'preference',
id: 'id'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name:'name', mapping:'name'},
{name:'id', mapping:'id'},
{name:'value', mapping:'value'}


proxy: new Ext.data.HttpProxy({url: '/dashboard/json',method:'get'}),
reader: new Ext.data.JsonReader({id:"id"},[
{name:'name', mapping:'attributes.name'},
{name:'id', mapping:'attributes.id'},
{name:'value', mapping:'attributes.value'}])


9 Apr 2007, 5:59 AM
Argggggggggg. Never mind, I was putting some debug code in the ext-all-debug.js file and I screwed up. Please disregard!



25 Apr 2007, 1:48 AM
I'm having problem with the highlight effect and prototype. I'm trying to do the introduction tutorial. When I do Ext.get('myDiv').highlight() nothing happens. Here is my script tags in the head.

<script type="text/javascript" src="../adapter/prototype/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="../adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="../adapter/prototype/effects.js"></script>
<script type="text/javascript" src="../adapter/prototype/dragdrop.js"></script>
<script type="text/javascript" src="../adapter/prototype/controls.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

When I'm including YUI it works perfectly, but with prototype I'm getting only this warning several times (whenever highlight is executed) in the JavaScript Console (Firefox):

Warning: Error in parsing value for property 'size'. Declaration dropped.
Source File: file:///F:/dev/ext-1.0/IntroToExt/ExtStart.html
Line: 0

In IE6 I'm also getting some error for object required...


25 Apr 2007, 3:13 AM
First of all make sure you are using prototype 1.5 and scriptacilious 1.7. Also I think your script tags are in the wrong order. The order should be prototype, scriptacilious, adapter, ext. Try this:

<script type="text/javascript" src="../adapter/prototype/prototype.js"></script>
<script type="text/javascript" src="../adapter/prototype/effects.js"></script>
<script type="text/javascript" src="../adapter/prototype/dragdrop.js"></script>
<script type="text/javascript" src="../adapter/prototype/controls.js"></script>
<script type="text/javascript" src="../adapter/prototype/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

25 Apr 2007, 4:27 AM
I'm pretty sure that I'm with the latest version - triple checked :)

Also saw that the script tags are not ordered properly - didn't help. Even copy/paste your suggestion (same as mine) -> :(

Everything else is working fine. Message boxes, Grids...

If I switch to YUI -> everything is ok.

Also tried other effects. Puff for example has strange effect under IE6. YUI was consistent under both IE and FF.

26 Apr 2007, 3:45 AM
Can someone verify this and say... no it works fine or yes there is a bug...

26 Apr 2007, 8:40 AM
Can't say as I'm not using the prototype adapter - can you verify that this is still occurring with their latest 1.5 RC3 release from yesterday (I think)

26 Apr 2007, 10:50 AM
Yes... same problem with the latest prototype and scriptaculous RCs.

Please... can anyone try this. Just highlight effect with prototype.

26 Apr 2007, 10:58 AM
Can you package up a test page along with all the needed script files including ext, prototype, scriptacilious, etc?


26 Apr 2007, 11:25 AM
Here it is. It's without ext-all.js
Copy your own version, because the zip is getting too big.

26 Apr 2007, 12:41 PM
Well I tried your test and I think I'm getting the same results as you. Other effects work, just not highlight.

I would definitely think this is a bug. Just hope either you can debug it to see whats going on or Jack and crew can look at it.


29 Apr 2007, 5:12 PM
Hi guys,

I think Ive found the problem with highlighting and the prototype bridge. From what I've seen, the YUI library (ext's default and weapon of choice library) automatically appends a '#' infront of colors. Effect.Morph (the animation utility that ext uses from script.aculo.us), expects you to put your own '#' infront of colors. So ext is sending colors to Effect.Morph like this:

Effect.Morph(el, 'background: ffff99');

instead of:

Effect.Morph(el, 'background: #ffff99');

This is part #1 of the problem. The other problem is that the Effect.Morph doesnt support a transformation using a "from" property, in the case of a highlight: { backgroundColor: { from: '#ffff99', to: '#ffffff' } }, which is probobally why Ext.lib.Anim.run isnt sending it to Effect.Morph, but it isnt handling it either, so the "from" bit just gets dropped of.

Ive hacked in some fixes and got mine working fine.

Like I said, from debugging the code, this is what I have found. I could be wrong, but I think I'm on the right track.

*EDIT* This probobally also relates to the jQuery bug, but I'm just guessing.


30 Oct 2007, 2:03 PM
Here is my actual solution. Seems to work for me OK. (Tested and works in the latest version of the Ext-Prototype adapter.)

Add this code to the switch case in the Ext.lib.Anim.run function found in the prototype adapter Look for the comment "scriptaculous doesn't support, so convert these":

case 'backgroundColor':
//Set the "to" style. As most color animations come from Ext
//as { backgroundColor: { to: color1, from: color2 }, I have to
//set the elements backgroundColor to that the value of from.
backgroundColor: '#' + args[k].from
//Now set the "to" color with the "#" prepended.
o[k] = '#' + String(args[k].to);

Add that code to the source version of the adapter and rebuild.

Hope this helps...