Using yui-ext in VS [Archive]

irishdunn

10-02-2006, 04:20 PM

I am trying to toy with yui in comparison to qooxdoo, I need to be able to place a table on the page so I stubled across yui-ext and the grid. I cannot get this to work in visual studio for the life of me, I dont think that I am including the correct files:

here is a copy of my html page:

<html>
<head>
<title>Yui Skeleton Prototype</title>

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

</head>
<body>

<script></script>

</body>
</html>

and here is the exact copy of the grid-example.js from jacks blog:

var Example = {
init : function(){
// some data yanked off the web
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(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: "Company", width: 200, sortable: true, sortType: sort.asUCString},
{header: "Price", width: 75, sortable: true, renderer: money},
{header: "Change", width: 75, sortable: true, renderer: change},
{header: "% Change", width: 75, sortable: true, renderer: pctChange},
{header: "Last Updated", width: 85, 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);

Sorry if that code above is unnecessary; if you need any more information to help me out please post any questions I will be watching this thread attentively.

TIA

Andrew

jack.slocum

10-02-2006, 09:01 PM

It seems to have stripped your script tags. Can you post the first one again but without the code block?

Jack

irishdunn

10-03-2006, 09:11 AM

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Yui Skeleton Prototype</title>

<script type="text/javascript" src="../Scripts/yui/yahoo.js"></script>
<script type="text/javascript" src="../Scripts/yui/event.js"></script>
<script type="text/javascript" src="../Scripts/yui/dom.js"></script>
<script type="text/javascript" src="../Scripts/yui/yui-ext.js"></script>

</head>
<body>

<script type="text/javascript" src="../Scripts/yui/grid-example.js"></script>

</body>
</html>

I apologize for not checking that out, thanks for the quick reply Jack.

jack.slocum

10-03-2006, 09:36 AM

The one thing that will cause it to choke, GridDD extends YAHOO.util.DDProxy so you can either remove it if you don't need DD or include the yahoo dragdrop-min.js file.

You can search and remove GridDD manually, or you could get JS Builder (http://www.jackslocum.com/yui/2006/09/17/js-builder-a-simple-javascript-build-tool/), open yui-ext.jsb and remove GridDD.js from the output file.

For remote loading (which your pasted code isn't using) you would also need connection-min.js.

irishdunn

10-03-2006, 01:03 PM

I included the dragdrop-min.js file now, but I am getting the same error:

grid.container.dom is null or underfined.

I have dom included also, little confused at why this error is coming up... please help!

jack.slocum

10-03-2006, 11:43 PM

You are missing the container element where the grid is to be rendered. For example:

<div id="grid-example" style="width:500px; height:200px"></div>

irishdunn

10-04-2006, 09:49 AM

Thanks a ton for your help so far Jack, actually I was posting last night about how i think that I didnt have a div there and a linking stylesheet and that was the whole problem.

turns out that was correct.

at this point I am seeing a box being rendered on the page but I dont think I am understanding the use of styles. I have politely stole your grid_32_1.css off your blogsite but I only get a nice looking box with no content.

Sorry for the handholding, if you have time please push me over the edge to finally getting a working model so I can move foward with this project.

jack.slocum

10-04-2006, 11:23 AM

I didn't even notice the missing stylesheets. They are included (along with the images) in the resources directory of the download. You may have to tweak the image paths in the CSS file to match your structure. I would recommend also including reset.css from the YUI download.

Can you paste in your source again as it stands now?

irishdunn

10-04-2006, 12:51 PM

Its actually up and working now, Although I do have some more specific requirements to handle here when things are selected in my master table.

I need to have a master table of "applications" and two sub tables for the master table that hold "users" and "roles" for applications. The users table will then have a tabbed window that has all the user specific information on it.

How do u suggest approaching this, I know the event handles are created in the js file for each of the grids so I am not sure how to trigger events in other grids when an event fires in let us say the master grid.

jack.slocum

10-04-2006, 04:13 PM

I would recommend reading over the grid posts and examples on the blog. They cover events pretty thoroughly.

In particular, you will want to listen for rowselect or selectionchange event in your grid's selection model.