ExtJS ComboBox：允许用户不选择任何值（空）

Posted 2023-02-26

【中文标题】ExtJS ComboBox：允许用户不选择任何值（空）

【英文标题】：ExtJS ComboBox: allow user to select no value (null)

【发布时间】：2014-04-08 15:38:07

【问题描述】：

我有一个 Ext ComboBox，用户应该可以在其中不选择任何值。 ExtJS 不支持开箱即用。

我尝试过的：

使用第二个触发器清除值

有效，但不是很实用。我想要一个更好的解决方案。

将“假”空项添加到存储：

虽然这确实是一种工作，但我必须为此修改模型以允许 id 为空值。而且这看起来更像是一个 hack。

设置自定义 tpl 喜欢

'<ul class="x-list-plain">',
  '<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
  '<tpl for=".">',
    '<li role="option" unselectable="on" class="x-boundlist-item">name</li>',
  '</tpl>',
'</ul>'

但现在变得非常困难，现在想想如何让它正常工作。

jsfiddle:

http://jsfiddle.net/q5e3J/1/

使用自定义 tpl：http://jsfiddle.net/q5e3J/2/

【问题讨论】：

我也需要这个，我也想要自定义tpl，但对模板了解较少。我会开始赏金，这样会引起更多关注......

提供一个小提琴...

您的小提琴似乎不包含自定义 TPL。

添加了第二个 jsfiddle

that 不是你想要做的吗？

【参考方案1】：

请参考此链接How to add an empty item to ExtJS combobox?

更新： jsfiddle 实现了该解决方案：http://jsfiddle.net/q5e3J/3/

var combo = Ext.create('Ext.form.field.ComboBox', 
    renderTo: Ext.getBody(),
    displayField: 'name',
    valueField: 'abbr',
    value: 'AL',
    store: Ext.create('Ext.data.Store', 
        model: 'State',
        data: states
    ),
    queryMode: 'local',
    editable: false,
    emptyText: 'No Selection',
    listConfig: 
        tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
            + '<tpl for=".">'
            + '<div class="x-boundlist-item">name</div></tpl>',
        listeners: 
            el: 
                delegate: '.my-boundlist-item-menu',
                click: function() 
                    combo.clearValue();
                
            
        
    
);

【讨论】：

感谢您的回答 - 但我不明白。你能用你的代码更新jsfiddle吗？

这是一个非常棒的解决方案。但它确实有一个缺点：无法通过键盘导航选择 emptyValue。总的来说，在大多数情况下没什么大不了的。谢谢！

此外，如果您通过配置创建所有内容，则不能使用 combo.clearValue() （因为未定义组合）。相反，您可以使用单击事件处理程序 (el) 的第二个参数并执行以下操作：Ext.getCmp(el.parentNode.parentNode.id).findParentByType('combobox')。可能有一种更简单的方法，但我想要一些能够在版本升级中幸存下来的东西。不过，我找不到使用双 parentNode 引用的方法。

修改了您的代码以使其更具交互性，并将 json 数据转换为二维数组以提高可读性。 -> jsfiddle.net/MrPolywhirl/1t3z8b2L

【参考方案2】：

您可以在组合配置上使用“更改”侦听器并检查空值：

change: function() 
  if (this.getValue() === null) 
    // Set default Value here
  
;

【讨论】：

我有 2 个问题：它不适用于 'editable: false' 并且不会直观地向用户显示如何选择 'all' 值。

您可以将您的组合/商店/模型的定义添加到问题中吗？我也许能给你一个更好的答案。

jsfiddle.net/q5e3J/1 我想不选择任何状态（根据上下文可能意味着“无”或“全部”）

将可编辑属性设置为 false，我看不到任何其他方法可以做到这一点。您必须编辑模型并添加一个表示“null”的值。

是否无法创建添加此行的模板？