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文件（干净方法）或在index.html的<style>标记中（可以测试）：

.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;}