ExtJS 动态更改组合框项的值答案

【问题标题】：ExtJS changing the value of a combobox item on the flyExtJS 动态更改组合框项的值
【发布时间】：2017-11-14 00:42:35
【问题描述】：

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

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

        this is my indented value

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

&nbsp;&nbsp;&nbsp;&nbsp;this is my indented value

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

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

【问题讨论】：

标签： javascript extjs combobox

【解决方案1】：

我会反其道而行之，因为这样更容易也更合乎逻辑：缩进首先不应该是值的一部分。我会修改组合的模板：

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

并向商店项目添加一个布尔值：

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
    }],
}

【讨论】：

我也是这么想的，但是我对不同的项目有一定数量的缩进，一个项目可能有 2，另一个项目可能有 4，根项目有 2，然后子项目有 4 ..它变得相当复杂
@BigJobbies 我已经修改了我的答案。