javascript - ExtJS 即时更改组合框项目的值

Question

所以我使用 ExtJS 3.3，我有一个组合框，其中填充了值，一些值在展开时需要在列表中缩进，所以我使用了   这个当组合框展开时效果很好，但是一旦我选择了一个项目，  实际上会在折叠时显示在组合框中。

例如；当它展开时，我的值显示为

        this is my indented value

这正是我想要的，但是当折叠时，该值显示为

    this is my indented value

有什么方法可以即时 trim 值前面的空格，以便在展开 View 中显示缩进，但折叠时它只显示值而不显示其他内容？

我找到了一个 select 监听器，但我只能找到这些。

Answer 1

我会反其道而行之，因为这样更简单也更符合逻辑:缩进一开始就不应该是值的一部分。我会修改组合的模板:

tpl: '<tpl for="."><div class="x-combo-list-item"><tpl if="indent">&nbsp;&nbsp;&nbsp;&nbsp;</tpl>{text}</div></tpl>',

并向商店项目添加一个 bool 值:

fields: [{
    name:'indent',
    type:'boolean'

如果设置为 true，将缩进与存储记录对应的值。

如果您想要不同的缩进，您可以尝试使用模板函数根据数字生成缩进。以下示例仅适用于最新版本的 ExtJS，YMMV:

tpl: new Ext.XTemplate(
    '<tpl for="."><div class="x-combo-list-item">{[ this.getIndent(values.indent) ]}{text}</div></tpl>', 
    {
        getIndent: function(indent) {
            var s = "";
            for(var i=0;i<indent; i++) s= s+"&nbsp;";
            return s;
        }
    }
),
store:{
    inlineData:[{
        text: 'A',
        indent:2
    },{
        text: 'B',
        indent: 4
    }],
}