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

Posted 2023-02-26

【中文标题】extjs 4.1 如何在 xtemplate 中显示编号和项目符号

【英文标题】：extjs 4.1 How to show numbered and bullet in xtemplate

【发布时间】：2013-07-29 08:48:45

【问题描述】：

我在 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 中显示编号和项目符号。怎么解决谢谢

【问题讨论】：

您必须恢复 Ext 覆盖的 CSS 样式，特别是针对该面板（使用自定义 CSS 类）和每种类型的元素。这有点挑剔。

@rixo 怎么做？我很傻:(

【参考方案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;

【讨论】：

我在jsfiddle.net/qbytj/2 中尝试过，但不起作用:(。哪里错了？:(

我的错，我认为它不需要指定 li 元素就可以工作。显然它没有。我已经更新了我的答案，forked your fiddle 作说明。