Create a table with Ext.Templates

[SmyersM]

CourseScheduler.Templates = {};
CourseScheduler.Templates.Table = new Ext.Template(
'<table name="{id}" width="100%" height="{height}" border="1">',
'{content}',
'</table>'
);
CourseScheduler.Templates.Column = new Ext.Template(
'<tr height="{height}">',
'{content}',
'</tr>'
);
CourseScheduler.Templates.Row = new Ext.Template(
'<td width="{width}" height="{height}">',
'{content}',
'</td>'
);

CourseScheduler.Templates.CreateTable = function(parent, rows, cols, height){
var table = {};
var tableContent = { };
var tableValues = {height: height, content: tableContent};
CourseScheduler.Templates.Table.append(parent, tableValues, table)

var row = {};
for (var i = 0; i < rows; i ++){
var oneRow = {content: "hi", height: "10%", width: "25%"};

CourseScheduler.Templates.Row.append(table, oneRow, row)

var col = {};
for (var j = 0; j < cols; j ++){
var oneCol = {content: "hi", height:"10%"};

CourseScheduler.Templates.Row.append(row, oneCol, col)
}
}


}

Is the idea right. Yes i need to fix obvious bugs, but can this be done reliably?

[SmyersM]

I want to add that I do really make a serious effort to research before asking questions on either the free or the prem forums.

I discovered more information after posting my question:

table = CourseScheduler.Templates.Table.append(parent, tableValues, true)
CourseScheduler.Templates.Row.append(table.dom.id, oneRow, row)

are two things i had wrong, and since I have gotten some good results with those changes, templates seem to be the way to go.

[SmyersM]

my row does not have an ID, so i cannot pass it in to applyTemplate as the parent.

and my rows are surrounded with

<tbody id="ext-gen23">
</tbody>

[SmyersM]

CourseScheduler.Templates.CreateTable = function(parent, rows, cols, height){
var table = {};
var tableContent = { };
var tableValues = {height: height};
table = CourseScheduler.Templates.Table.append(parent, tableValues, true)
var tableId = table.dom.id;

var row = {};
for (var i = 0; i < rows; i ++){
var r = "r" + i;
var oneRow = {id: r, height: "10%", width: "25%"};

row = CourseScheduler.Templates.Row.append(tableId, oneRow, true)

var col = {};
for (var j = 0; j < cols; j ++){
var c = "r" + i + "c" + j;
var oneCol = {id: c, content: "col", height:"10%"};

col = CourseScheduler.Templates.Column.append(r, oneCol, true)
}
}
}

This code works much better. I know I totally answered my own question, but maybe others can see the process.

[brian.moeskau]

Your Row template should output TRs, and the Column template should output TDs. I assume that you updated your templates after the initial post? Otherwise it seems like your tags would be getting output incorrectly.

[SmyersM]

Good catch, yes i fixed it and didn't bother reposting!

[SmyersM]

By the way, I want to float some div's over the table, how is this possible? I am trying different combinations of position: fixed / absolute

But it keeps measuring my position off of 0,0 window instead of 0,0 parent div.

IE renders it correctly (OF ALL THINGS!?!)

FF puts the divs BELOW the table...

Here is the code



<div id=parent style="position:relative">
<table>...</table>
<div id=floatie style="position:absolute; left:x top:y">
hi
</div>
</div>

[mikegiddens]

I looked at what you are trying to do and Jack put in some new MasterTemplate stuff that looks like you could simplify your table code. Use the combo as an example.

From jack:

var t = new Ext.MasterTemplate(
'<select name="{name}">',
'<tpl><option value="{value}">{text}</option></tpl>',
'</select>'
);

t.add({value: 'foo', text: 'bar'});
t.add({value: 'foo1', text: 'bar2'});
t.append('some-el', {name: 'my-name'});

More MasterTemplate examples found at: http://extjs.com/forum/showthread.php?t=1618

[SmyersM]

Good idea! I had never heard about master templates but when I went to the docs i realized someone must have slipped it in to my computer when I wasn't looking...

Anyone have any ideas on the floating problem?

I've already changed the zorder of the table to no avail. Rather than change the cell value i'm going to float a div over the loc. Easier to calc the loc than find the right cell.

Viewing http://www.coursescheduler.net/lite in IE7 / FF will show the problem.

[SmyersM]

sigh... I spent a few hours only to realize that


var top = 10;
var args = {id: "days" + "_" + i, width: width, height: height, content: days[i], style: 'schedule_day', left: left, top: top};
var div = CourseScheduler.Templates.FloatingCenteredDiv.append(parent, args, true)

was not working, but


var top = 10 + "%";
var args = {id: "days" + "_" + i, width: width, height: height, content: days[i], style: 'schedule_day', left: left, top: top};
var div = CourseScheduler.Templates.FloatingCenteredDiv.append(parent, args, true)

does work...

Probably should have done

var top = "10"

[brian.moeskau]

Is it a string data type issue, or is the fact that 10 = pixels instead of percent the issue? The initial code seems like it should work fine and position to top = 10 pixels offset. Not sure I understand what you're saying the resolution was :-/ Just clarifying...

[SmyersM]

no problem, I may have gotten into the situation of changing the base code so much that the problem didnt exist in rev a.



CourseScheduler.Templates.FloatingCenteredDiv = new Ext.Template (
'<div class="{style}" align="center" id="{id}" style="z-index: 2; position: absolute; width: {width}; height: {height}; left: {left}; top: {top}; border-style:solid; border-width:0px; " >',
'{content}',
'</div>'
);


When i called the template i did this:

height = "10%";
top = 10;
left = "14%"

args = {height: height; left: left, top: top}; (etc)

so the template.apply(parent, args, return); was leaving out the 'top' argument because it was a number instead of a string.

The code that got outputted to the browser did not include the 'top' argument at all.

<div style="left: 10; height: 10;"> (etc)

IE assumed a top of zero, and FF assumed a top of (prevElement.height+prevElement.top)

[SmyersM]

Sorry for cluttering up the support forums with noob questions, but I'm actively working more than full time to complete a working project, and i'm getting bogged down by these devilish details. Only ones i can turn to are the ext experts :)