PDA

View Full Version : I can't get my templated table to wrap?



darthwes
10 Jun 2010, 11:21 AM
I have a window and an XTemplate. What I want to do is take a server response with lots of text and stick it into my template. What happens is the cell becomes super long and doesn't wrap. I've been looking over the template and generating the html to see if it's the template or the window. It looks like if I just take the html and stick it in a browser window it wraps fine. Why is the Ext Window not acting the same?


Ext.onReady(function() {
var xtpl = new Ext.XTemplate(
'<tpl for=".">',
'<table id="bumpOffSides" border="3">',
'<tr>',
'<td width="20px"></td>',
'<td nowrap>',
'<table border="1" cellpadding="10" style="font-family:Tahoma; font-size:12px;">',
'<tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr>',
'<tr><td colspan="5" style="font-family:Tahoma; font-size:14px;">Selection: <span style="font-weight:bold;">{DisplaySel}</span></td></tr>',
'<tr><td colspan="5"><img src="ext/resources/images/default/s.gif" height="12px"></td></tr>',
'</table>',
'</td>',
'<td width="20px"></td>',
'</tr>',
'</table>',
'<br>',
'</tpl>'
);

var args = {'DisplaySel': "100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, ABC, DEF, GEH, IJK, LMN, OPQ, RST, UVW, XYZ, 110, 220, 330, 440, 550, zyx, wvu, tsr, qpo, nml, kji, heg, fed, cba"};

var asHtml = xtpl.apply( args );

var myWin = new Ext.Window({
title: 'Performance Test',
//layout: 'fit',
floating: true,
shadow: false,
closeAction: 'close',
modal: true,
autoScroll: false,
resizable: true,
id: 'pt-window',
bodyStyle: 'background-color: white',
html: asHtml,
tools: [
{
id: 'print',
handler: function() {
var myDisplaySettings = "toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=700, height=500";
var asHtml = xtpl.apply( args );
var myPrintingWindow = window.open("","",myDisplaySettings);
myPrintingWindow.document.open();
myPrintingWindow.document.write("<html>\n<head>\n<title>Performance Test</title>\n</head>\n");
myPrintingWindow.document.write("<body>\n");
myPrintingWindow.document.write(asHtml);
myPrintingWindow.document.write("</body>\n</html>\n");
myPrintingWindow.document.close();
}
}
]
});

myWin.show();
xtpl.overwrite(Ext.getCmp('pt-window').body, args);
});

You can see when you click the "print" toolbar icon that the html should be resizable and the one row with all the data in it can be wrapped. However, when I display this in the window it loses these nice attributes and just looks as ugly as it can look. Why is the table inside the Ext.Window acting like it can't wrap? Is it the interaction between the template and the window or is it the layout manager or something altogether different? I can't figure this out, someone gets a prize for answering this...