PDA

View Full Version : Files to be included



13 Sep 2006, 10:21 PM
Hi
I am new to JS.
Can you please help me on providing a working example( a simple html page) showing grid control (and all other extensions u havel like tab etc..)
Actually the problem I am facing is, its hard for me to figure out what all JS files are needed for a particular control..

Please help me out

next2you
14 Sep 2006, 2:31 AM
Assuming you have downloaded the yui library and yui-ext.31 and put
them into the yui-ext.31 and yui folder, this just displays the example.

Just a quick shot...

Christian



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link href="yui-ext.31/resources/grid.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="yui/build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="yui/build/event/event.js" ></script>
<script type="text/javascript" src="yui/build/dom/dom.js" ></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="yui/build/animation/animation.js" ></script>
<script type="text/javascript" src="yui-ext.31/yui-ext.js" ></script>
<script type="text/javascript">


Example = {
init : function(){
// some data yanked off the web
this.myData = [
['14000',1,0.02,0.03,'9/1 12:00am'],
['14001',0,0.42,1.47,'9/1 12:00am'],
['14002',2,0.28,0.34,'9/1 12:00am'],
['14003',3,0.02,0.03,'9/1 12:00am'],
['14004',0,0.42,1.47,'9/1 12:00am'],
['14004',0,0.28,0.34,'9/1 12:00am'],
['14005',0,0.02,0.03,'9/1 12:00am'],
['14006',3,0.42,1.47,'9/1 12:00am'],
['14007',4,0.28,0.34,'9/1 12:00am'],
['14008',2,0.02,0.03,'9/1 12:00am'],
['14009',1,0.42,1.47,'9/1 12:00am'],
['14010',0,0.28,0.34,'9/1 12:00am'],
['14011',1,0.02,0.03,'9/1 12:00am'],
['14012',2,0.42,1.47,'9/1 12:00am'],
['14013',3,0.28,0.34,'9/1 12:00am']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(this.myData);

// example of custom renderer function
function italic(value){
return '' + value + '';
}

// example of custom renderer function
function change(val, suffix){
suffix = suffix || '';
if(val > 0){
return '<span style="color:green;">' + val + suffix + '</span>';
} else if(val < 0){
return '<span style="color:red;">' + val + suffix + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
return change(val, '%');
}

// example of custom renderer function, this hideous code was grabbed off the web
function money(mnt) {
mnt -= 0;
mnt = (Math.round(mnt*100))/100;
mnt = (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
return "$" + mnt;
}

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Bild", width: 200, sortable: false, sortType: sort.asUCString},
{header: "Rating", width: 100, sortable: true, renderer: money},
{header: "Change", width: 100, sortable: true, renderer: change},
{header: "% Change", width: 100, sortable: true, renderer: pctChange},
{header: "Last Updated", width: 100, sortable: true, renderer: italic}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
this.grid = new YAHOO.ext.grid.Grid('grid-example', dataModel, colModel);
var start = new Date().getTime();
this.grid.render();
var end = new Date().getTime();
//alert('Rendered in ' + ((end-start)/1000) + ' seconds');
this.grid.getSelectionModel().selectFirstRow();

}
}

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>
</head>
<body>
<div id="grid-example" style="width:630px;height:250px;overflow:hidden;position:relative;"></div>
</body>
</html>
[/code]

xbartv
19 Sep 2006, 2:01 PM
Well. i did copy & paste of this code, then i changed the paths to coincide with my paths. But, i can see the grid. I only see the div empty.
Also i was trying other examples but with same results. Anybody could help me please ??

I recieve this error:

YAHOO is not defined
null

in this line:

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);

jack.slocum
19 Sep 2006, 5:11 PM
The yahoo.js file from the Yahoo! UI download defines YAHOO. Are you sure your paths are correct?

Can you put the page up somewhere where I can see it? That makes it much easier to figure out what is wrong.

Jack

dfenwick
19 Sep 2006, 10:28 PM
Thanks for posting this, Jack. I'd been banging my head against the wall trying to figure out how all of it fits together as well, and was about to post nearly the same request. Works great on my machine.

Incidentally, this control is nearly perfect for using in an AJAX mail client. I'm thinking about using it just for that purpose.

Again, I appreciate the work you're doing on this.

jack.slocum
19 Sep 2006, 10:52 PM
Thanks. Glad I could help.

Yes, I think the grid in it's completed state will be very good for an Ajax based email client. The new version due out within the next week has alot of new features which I'm sure will help you along the way.

Jack

xbartv
20 Sep 2006, 10:41 AM
Here is my code:



<DOCTYPE>
<html>
<head>
<meta>
<title></title>
<link>

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script>


Example = {
init : function(){
// some data yanked off the web
this.myData = [
['14000',1,0.02,0.03,'9/1 12:00am'],
['14001',0,0.42,1.47,'9/1 12:00am'],
['14002',2,0.28,0.34,'9/1 12:00am'],
['14003',3,0.02,0.03,'9/1 12:00am'],
['14004',0,0.42,1.47,'9/1 12:00am'],
['14004',0,0.28,0.34,'9/1 12:00am'],
['14005',0,0.02,0.03,'9/1 12:00am'],
['14006',3,0.42,1.47,'9/1 12:00am'],
['14007',4,0.28,0.34,'9/1 12:00am'],
['14008',2,0.02,0.03,'9/1 12:00am'],
['14009',1,0.42,1.47,'9/1 12:00am'],
['14010',0,0.28,0.34,'9/1 12:00am'],
['14011',1,0.02,0.03,'9/1 12:00am'],
['14012',2,0.42,1.47,'9/1 12:00am'],
['14013',3,0.28,0.34,'9/1 12:00am']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(this.myData);

// example of custom renderer function
function italic(value){
return '' + value + '';
}

// example of custom renderer function
function change(val, suffix){
suffix = suffix || '';
if(val > 0){
return '<span>' + val + suffix + '</span>';
} else if(val < 0){
return '<span>' + val + suffix + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
return change(val, '%');
}

// example of custom renderer function, this hideous code was grabbed off the web
function money(mnt) {
mnt -= 0;
mnt = (Math.round(mnt*100))/100;
mnt = (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
return "$" + mnt;
}

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Bild", width: 200, sortable: false, sortType: sort.asUCString},
{header: "Rating", width: 100, sortable: true, renderer: money},
{header: "Change", width: 100, sortable: true, renderer: change},
{header: "% Change", width: 100, sortable: true, renderer: pctChange},
{header: "Last Updated", width: 100, sortable: true, renderer: italic}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
this.grid = new YAHOO.ext.grid.Grid('grid-example', dataModel, colModel);
var start = new Date().getTime();
this.grid.render();
var end = new Date().getTime();
//alert('Rendered in ' + ((end-start)/1000) + ' seconds');
this.grid.getSelectionModel().selectFirstRow();

}
}

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>
</head>
<body>
<div></div>
</body>
</html>


- Firebug output this error:

YAHOO.ext has no properties (line 43)

- Aptana output this error:

Undefined variable: Example (line 23)
Undefined variable: YAHOO (line 43)
Missing ';' (line 97)
Undefined variable: YAHOO (line 99)

jack.slocum
20 Sep 2006, 12:31 PM
I can't see what you have linked. Do you have grid.css linked?

Try this,

Download:
http://www.jackslocum.com/blog/javascript/yui.js

Include only that file, the yui-ext.js file and grid.css in your page. If your page works then the problem is related to your references (which I can't see).

xbartv
20 Sep 2006, 1:37 PM
I did what you said but i can't see the grid. Only the borders of the div.
What's wrog ??

The code of the page now is:


<DOCTYPE>
<html>
<head>
<meta>
<title>YAHOO EXT</title>
link href="grid.css" type="text/css" rel="stylesheet" /
script type="text/javascript" src="yui.js" ></script

<script>
Example = {
init : function(){
// some data yanked off the web
this.myData = [
['14000',1,0.02,0.03,'9/1 12:00am'],
['14001',0,0.42,1.47,'9/1 12:00am'],
['14002',2,0.28,0.34,'9/1 12:00am'],
['14003',3,0.02,0.03,'9/1 12:00am'],
['14004',0,0.42,1.47,'9/1 12:00am'],
['14004',0,0.28,0.34,'9/1 12:00am'],
['14005',0,0.02,0.03,'9/1 12:00am'],
['14006',3,0.42,1.47,'9/1 12:00am'],
['14007',4,0.28,0.34,'9/1 12:00am'],
['14008',2,0.02,0.03,'9/1 12:00am'],
['14009',1,0.42,1.47,'9/1 12:00am'],
['14010',0,0.28,0.34,'9/1 12:00am'],
['14011',1,0.02,0.03,'9/1 12:00am'],
['14012',2,0.42,1.47,'9/1 12:00am'],
['14013',3,0.28,0.34,'9/1 12:00am']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(this.myData);

// example of custom renderer function
function italic(value){
return '' + value + '';
}

// example of custom renderer function
function change(val, suffix){
suffix = suffix || '';
if(val > 0){
return '<span>' + val + suffix + '</span>';
} else if(val < 0){
return '<span>' + val + suffix + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
return change(val, '%');
}

// example of custom renderer function, this hideous code was grabbed off the web
function money(mnt) {
mnt -= 0;
mnt = (Math.round(mnt*100))/100;
mnt = (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
return "$" + mnt;
}

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Bild", width: 200, sortable: false, sortType: sort.asUCString},
{header: "Rating", width: 100, sortable: true, renderer: money},
{header: "Change", width: 100, sortable: true, renderer: change},
{header: "% Change", width: 100, sortable: true, renderer: pctChange},
{header: "Last Updated", width: 100, sortable: true, renderer: italic}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
this.grid = new YAHOO.ext.grid.Grid('grid-example', dataModel, colModel);
var start = new Date().getTime();
this.grid.render();
var end = new Date().getTime();
//alert('Rendered in ' + ((end-start)/1000) + ' seconds');
this.grid.getSelectionModel().selectFirstRow();

}
}

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>
</head>
<body>
<div></div>
</body>
</html>

FireBug output:
- YAHOO.ext has no properties (line 30)

jack.slocum
20 Sep 2006, 2:15 PM
Your div container has no properties? Where's the ID and size?

http://www.jackslocum.com/forum/viewtopic.php?t=8

xbartv
20 Sep 2006, 5:17 PM
Yes, it has. Thanks for your replies. I apreciate very much.
I don't know what's going on but the forum take out some code when i submit !!!


<div id="grid-example" style="width:630px;height:250px;overflow:hidden;position:relative

jack.slocum
20 Sep 2006, 9:56 PM
Try to put up a page or you can email it to me and I will take a look:

jack.slocum AT yahoo DOT com

jack.slocum
21 Sep 2006, 12:44 PM
I got your email. You haven't included yui-ext.js. You have the yui.js file, which includes the YUI base code, but yui-ext.js includes the grid. You need both of them.

Jack

xbartv
22 Sep 2006, 10:24 AM
Thank you Jack. This was the solution, now works flawlessly.

nothercount
30 Dec 2006, 11:23 PM
Hey, this example breaks for 0.33. There is the path change for the css but asides from that I get an error:

"yahoo.ext.util has no properties" in the line instantiating a yahoo.ext.util.browser object. Can someone explain to me the fix?

Is there interest in raising a wiki? The documentation is great but is not a tutorial or best practices -- and examples in forums can easily fall out of sync.

The project's impressive, Jack.

Thanks In Advance,
K.

jack.slocum
31 Dec 2006, 2:41 AM
There a wiki in the works. I'm just looking for contributors. :)

tryanDLS
31 Dec 2006, 10:01 AM
Are you sure you have all the files included? None of the grid examples should be affected by any .33 changes. The code posted here is obviously wrong, so if all you did was copy it from the above post, it's not going to work.

As to examples in forums falling out of sync - I would tend to disagree. Jack has worked hard to maintain backward compatibility when introducing new code, so if the example worked to begin with, it should still work. That's not to say that enhancements may have ocurred to provide better ways to do things.

nothercount
31 Dec 2006, 8:16 PM
I'm pretty sure. I have both versions in the same directory. In the script I just switch paths and it breaks. The error is instantiating the browser yahoo.ext.util has no properties. I've tried it in both FF1.5 and IE6.

Wikis are better at keeping working examples working -and fresh -because they are edited in place, making the primary view the current state. In forums the primary view is the thread (ie, the history). You have to page through to accumulate and reconstruct the current knowledge.

I'd like it if the thread on dependecies was made sticky and clarified. Is it out of date regarding yui 0.11.3 and yui-ext 0.33? What is utilities.js?

If a wiki is long in coming, can we sticky basic examples of the components and test them against each release? I can be responsible for (at least) the above versions of FF and IE.

I Appreciate It, K.

nothercount
31 Dec 2006, 8:24 PM
TryanDLS, thanks for the reply. One more thing -it's not obvious to me how the example code is wrong (asides from changing the path.) I'd appreciate it if you would explain how it's wrong or offer a fix; It would help me understand yui-ext.

Thanks, K.

jack.slocum
31 Dec 2006, 10:51 PM
Putting the examples themselves in a wiki probably won't happen. There were numerous requests for the to be in the download, which is why they are set up as they are now.

For other type of stuff (such as the extras forum) I have some ideas for that. It just takes time to put it all together.

tryanDLS
1 Jan 2007, 9:53 AM
If you're still having problems, please post a link or the code you have - the example posted in this thread is missing stuff, so I'd rather see what you have currently.

nothercount
1 Jan 2007, 11:13 AM
Tim,

I appreciate it. The code I have is just a copy of Christian's with the include paths changed to reflect my local installation and the library's directory changes between yui-ext 0.31 and 0.33. It works with 0.31 and I've copy and pasted it below:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link href="jscripts/lib/yui-ext.31/resources/grid.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jscripts/lib/yui/build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="jscripts/lib/yui/build/event/event.js" ></script>
<script type="text/javascript" src="jscripts/lib/yui/build/dom/dom.js" ></script>
<script type="text/javascript" src="jscripts/lib/yui/build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="jscripts/lib/yui/build/animation/animation.js" ></script>
<script type="text/javascript" src="jscripts/lib/yui-ext.31/yui-ext.js" ></script>
<script type="text/javascript">


Example = {
init : function(){
// some data yanked off the web
this.myData = [
['14000',1,0.02,0.03,'9/1 12:00am'],
['14001',0,0.42,1.47,'9/1 12:00am'],
['14002',2,0.28,0.34,'9/1 12:00am'],
['14003',3,0.02,0.03,'9/1 12:00am'],
['14004',0,0.42,1.47,'9/1 12:00am'],
['14004',0,0.28,0.34,'9/1 12:00am'],
['14005',0,0.02,0.03,'9/1 12:00am'],
['14006',3,0.42,1.47,'9/1 12:00am'],
['14007',4,0.28,0.34,'9/1 12:00am'],
['14008',2,0.02,0.03,'9/1 12:00am'],
['14009',1,0.42,1.47,'9/1 12:00am'],
['14010',0,0.28,0.34,'9/1 12:00am'],
['14011',1,0.02,0.03,'9/1 12:00am'],
['14012',2,0.42,1.47,'9/1 12:00am'],
['14013',3,0.28,0.34,'9/1 12:00am']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(this.myData);

// example of custom renderer function
function italic(value){
return '' + value + '';
}

// example of custom renderer function
function change(val, suffix){
suffix = suffix || '';
if(val > 0){
return '<span style="color:green;">' + val + suffix + '</span>';
} else if(val < 0){
return '<span style="color:red;">' + val + suffix + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
return change(val, '%');
}

// example of custom renderer function, this hideous code was grabbed off the web
function money(mnt) {
mnt -= 0;
mnt = (Math.round(mnt*100))/100;
mnt = (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
return "$" + mnt;
}

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Bild", width: 200, sortable: false, sortType: sort.asUCString},
{header: "Rating", width: 100, sortable: true, renderer: money},
{header: "Change", width: 100, sortable: true, renderer: change},
{header: "% Change", width: 100, sortable: true, renderer: pctChange},
{header: "Last Updated", width: 100, sortable: true, renderer: italic}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
this.grid = new YAHOO.ext.grid.Grid('grid-example', dataModel, colModel);
var start = new Date().getTime();
this.grid.render();
var end = new Date().getTime();
//alert('Rendered in ' + ((end-start)/1000) + ' seconds');
this.grid.getSelectionModel().selectFirstRow();

}
}

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>
</head>
<body>
<div id="grid-example" style="width:630px;height:250px;overflow:hidden;position:relative;"></div>
</body>
</html>

Then when I change the paths to the new directory:


<link href="jscripts/lib/yui-ext.0.33/resources/css/grid.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jscripts/lib/yui-ext.0.33/yui-ext.js" ></script>
<script type="text/javascript">


I get this error in FF1.5 (XP):



Error: YAHOO.ext.util has no properties
Source file: http://localhost/portfolio/jscripts/lib/yui-ext.0.33/yui-ext.js
Line: 11

and in IE6:


'YAHOO.ext.grid.DefaultDataModel' is null or not an object

I am using yui 0.11.3.


Thanks Again, K.

tryanDLS
1 Jan 2007, 12:06 PM
I think you still have an invalid path - one of your files is not being found. I tried this with yui-ext.33 and it works fine. It doesn't matter whether you use the individual yahoo js files or the combined utilities.js files. This is all I've included:



<script type="text/javascript" src="/yui/build/utilities/utilities.js" ></script>
<script type="text/javascript" src="/yui-ext/yui-ext.js" ></script>
<link type="text/css" rel="stylesheet" href="/yui-ext/resources/css/grid.css" />



Also, YUI is on version .12 (maybe .12.1) - I don't believe there were any breaking changes, but you should get the latest codebase.

nothercount
1 Jan 2007, 12:45 PM
Thanks Tim,

It's a yui dependency.

When I swap the yui 11.3 library for the 12.1 version--no changes to the code--it works. Also, when I changed the code to use utilities.js from yui 12.1 (it's not in 11.3) it works.

Most likely, there were yui organizational changes between 11.3 and 12.1 that caused the break. Less likely, my old yui library was corrupted.

Thanks For The Assist, K.