Sencha touch 2.0：将“空”选择添加到选择字段

Posted 2023-02-26

【中文标题】Sencha touch 2.0：将“空”选择添加到选择字段

【英文标题】：Sencha touch 2.0 : adding the 'empty' selection to a selectfield

【发布时间】：2012-04-12 13:45:33

【问题描述】：

我了解“选择字段”旨在从您提供的现有“选项”中进行选择（或从“商店”中的条目中进行选择）。

我想要的是用户不选择任何选项的可能性。 最重要的是，如果能够在未选择任何选项时显示占位符（例如“选择一个...”），那就太好了。

当前的选择字段行为是，如果您未提供初始值或不属于“选项”（或您的“商店”）的值，则默认选择第一项。

关于选择器，我不介意在选择一个选项后是否无法返回空选择。我想要的是，如果您不触摸它，则可以将选择字段留为空选择。

有没有人为此提供有效的解决方案（覆盖选择字段？扩展新字段？）

【参考方案1】：

这是 Thiem Nguyen 扩展 Select 字段的解决方案的通用实现。希望它能节省一些时间；）

/**
 * Adds an additional option to a select field filled by a store
 * @cfg mixed valueFieldValue Value of the added option
 * @cfg string displayFieldValue Text to display for the added option
 */
Ext.define('util.field.SelectPlus', 
    extend: 'Ext.field.Select',
    xtype: 'selectfieldplus',
    alternateClassName: 'Ext.field.SelectPlus',
    requires: 'Ext.data.Store',

    config: 
        displayFieldValue: '',
        valueFieldValue: ''
    ,

    /**@override
     * Insert our item each time the store is loaded
     * @param Ext.data.Store store The refreshed store
     */
    onStoreDataChanged: function(store) 
        if(store.findExact(this.getValueField(), this.getValueFieldValue()) === -1)  //prevent infinite loop ;)
            var item = Ext.create(store.getModel());
            item.set(this.getValueField(), this.getValueFieldValue());
            item.set(this.getDisplayField(), this.getDisplayFieldValue());
            store.insert(0, item);
        
        this.callParent([store]);
    
);

【讨论】：

很棒的解决方案... :-)

如果您在视图中使用 placeHolder 属性，此解决方案将不起作用..我不知道为什么..

【参考方案2】：

覆盖Ext.field.Select 和扩展新字段都能够满足您的需求，但我更喜欢第二种解决方案。根据我的经验，无论用户从您的选择字段中选择“空”还是“非空”选项，都会执行后续流程。例如：

将其作为“空”值保存到数据库中。 忽略它。

此外，由于它实际上是一个选项，用户可以随时在选择“非空”选项后再次选择“空”选项。

当然，这会有点烦人，尤其是当您与很多商店合作时。但考虑到灵活性和易用性，我推荐这个解决方案。

【讨论】：

谢谢，使用第二种解决方案，您的意思是向我拥有的每家商店添加一个条目？有没有办法自动将这样的条目添加到所有商店。由于我的商店是从本地存储加载的，我可以在使用代理加载后添加这个“假”条目吗？

可以通过监听load事件自动添加