Question

我有一个像这样定义的RowExpander：

var expander = new Ext.ux.grid.RowExpander({
    id: 'expander',
    tpl : new Ext.Template(
        '<pre style="word-wrap:break-word;"><p>{bigText}</p></pre>'
    )
});

bigText从服务器返回，包含一个包含所有html标记的完整html文档。出于某种原因，tpl无法正确解释这些标签，并且页面上的最终格式混乱（例如，法线图之间的间距过大）。

解决这个问题的好方法是什么？

编辑：这是从服务器返回的内容：（请原谅糟糕的格式 ...） “bigText”：“\ n \ n \ n \ n \ n.header {\ n \ tcolor：black; \ n \ tfont-family：Arial，Helvetica，Sans-Serif; \ n \ tfont-size：10pt \ n } \ n \ n.footer {\ n \ tcolor：black; \ n \ tfont-family：Arial，Helvetica，Sans-Serif; \ n \ ttont-size：10pt; \ n \ tfont-style：italic; \ n } \ n \ n .body-header {\ n \ tcolor：black; \ n \ tfont-family：Arial，Helvetica，Sans-Serif; \ n \ ttont-size：10pt; \ n \ ttont-weight：bold; \ n} \ n .body-content {\ n \ tcolor：black; \ n \ tfont-family：Arial，Helvetica，Sans-Serif; \ n \ tfont-size：10pt; \ t \ n} \ n＆lt; /样式＆gt; \ n \ n＆lt; / head＆gt; \ n \ n \ n \ n这是为了通知您，您的帐户余额大于或低于在线银行业务可查看的阈值。请求的详细信息如下所示。<帐号：＆lt; / span＆gt; xxxxxxx＆lt; / span＆gt;
\ n \ n余额：＆lt; / span＆gt; 100＆lt;＆lt; / span＆gt;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp; / span＆gt;
\ n \ n \ n \ n \ n \ n \ n \ n \ n此电子邮件和任何附件可能包含机密和特权信息。如果您不是预期的收件人，请向xxx报告@xx .com或致电1-xxx-xxx-xxxx，请删除此电子邮件并销毁任何副本。由预定接收者以外的人传播或使用此信息是未经授权的，并且可能是非法的。
\ n \ n＆lt; / p＆gt; \ n \ n \ n \ n发起时间：2011年9月6日下午2:10加拿大东部时间
\ n＆lt; / p＆gt; \ n \ n \ n＆lt; / body＆gt; \ n＆lt; / HTML＆gt; \ n“

Answer 1

HTML文档只能包含<HTML>，<HEAD> <BODY>个标记之一。从服务器发送的响应中删除这些标记，然后尝试。

Answer 2

pre标签用于格式化文本，不用于显示html。您需要首先转义HTML：

'<pre style="word-wrap:break-word;"><p>{[Ext.util.Format.htmlEncode(values.bigText)]}</p></pre>'

http://dev.sencha.com/deploy/ext-1.1.1/docs/output/Ext.util.Format.html#htmlEncode

Answer 3

如果bigText确实包含带有<html>，<head>，<title>等的完整HTML文档，那么您最好只从中提取正文部分。

此外，将它全部包含在<pre>标记内是没有意义的。你为什么这样做？

如果你真的想保留HTML页面的所有格式，也许你应该使用<iframe>代替。

使用Ext.Template时Extjs格式化问题

3 个答案: