extjs - extjs 4.1 如何在 xtemplate 中显示编号和项目符号

Question

我在http://jsfiddle.net/qbytj/ 中有一个 xtemplate，
这是我在 xtemplate 中的编号和项目符号

data: {
    x: '<table><tbody>'
       +'<tr><td colspan="4">'
       +' <ol><li>&#8203;my 1</li><li>my 2<br></li></ol>'
       +'</td></tr> </tbody></table>',
    y: '<table><tbody>'
       +'<tr><td colspan="4">'
       +' <ul><li>my 1</li><li>my 2</li><li>&#8203;</li></ul>'
       +'</td></tr></tbody></table>'
}

但这不显示编号和项目符号

我想在我的 xtemplate 中显示编号和项目符号。怎么解决 谢谢

Answer 1

首先，您需要将标记包装在自定义 CSS 类中。

您可以直接在 XTemplate 的标记中执行此操作：

Ext.create('Ext.XTemplate',
    '<div cls="my-ct-class">',
        // ... rest of your template
    '</div>',
);

或者您可以使用cls模板使用组件的选项。例如，如果它是一个面板：

Ext.widget('panel', {

    cls: 'my-ct-class',

    tpl: // ...
});

然后，您必须重新设置 Ext 已“重置”的所有内容以及您需要的所有内容...这是修复有序和无序列表所需的最小 CSS 规则集，以放入您自己的 CSS 文件（清洁方法）或<style>标签中在您的 index.html 中（可以进行测试）：

.my-ct-class ol li {
    list-style:decimal;}
.my-ct-class ul li {
    list-style:disc;}
.my-ct-class ul ul li {
    list-style:circle;}
.my-ct-class ul, .my-ct-class ol {
    padding-left: 2em;}