ExtJS 动态更改组合框项的值

Posted 2023-02-26

【中文标题】ExtJS 动态更改组合框项的值

【英文标题】：ExtJS changing the value of a combobox item on the fly

【发布时间】：2017-11-14 00:42:35

【问题描述】：

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

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

        this is my indented value

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

    this is my indented value

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

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

【参考方案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 我已经修改了我的答案。