Sencha touch 2 Sencha touch 2.0：将“空”选项添加到selectfield

我理解“selectfield”是指从您提供的现有“选项”或“store”中的条目中进行选择

我想要的是，允许用户不选择任何选项。 最重要的是，如果能够在没有选择任何选项的情况下显示占位符，比如选择一个…，那就太好了

当前的selectfield行为是，如果您没有提供初始值或不属于“选项”或“存储”的值，则默认情况下会选择第一项

关于选择器，我不介意在选择一个选项后是否无法返回空选择。我想要的是，如果您不触摸selectfield，它可能会留下一个空的选择

是否有人有有效的解决方案来覆盖selectfield？扩展一个新字段？

覆盖Ext.field.Select和扩展新字段都可以实现您需要的功能，但我更喜欢第二种解决方案。根据我的经验，无论用户从selectfield中选择空选项还是非空选项，都会执行后续过程。例如：

将其作为空值保存到数据库中。 简单地忽略它。 此外，由于它实际上是一个选项，用户可以在任何时候选择非空选项后再次选择空选项

当然，这会让你有点恼火，尤其是当你在很多商店工作的时候。但考虑到灵活性和易用性，我建议使用此解决方案。

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

将其作为空值保存到数据库中。 简单地忽略它。 此外，由于它实际上是一个选项，用户可以在任何时候选择非空选项后再次选择空选项

---

当然，这会让你有点恼火，尤其是当你在很多商店工作的时候。但考虑到灵活性和易用性，我建议使用此解决方案。

这里是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]);
    }
});

---

下面是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]);
    }
});

---

谢谢，对于第二个解决方案，您的意思是为我拥有的每个商店添加一个条目？有没有一种方法可以自动将这样一个条目添加到所有商店。由于我的存储是从本地存储加载的，我可以在使用代理加载后添加此“假”条目吗？您可以通过收听load Event自动添加谢谢，对于第二个解决方案，您的意思是为我拥有的每个存储添加一个条目？有没有一种方法可以自动将这样一个条目添加到所有商店。由于我的存储是从本地存储加载的，我可以在使用代理加载后添加此“假”条目吗？您可以通过收听load Event solution自动添加…：-如果在视图中使用占位符属性，则此解决方案无效。。我不知道为什么…奇妙的解决方案…：-如果在视图中使用占位符属性，则此解决方案无效。。我不知道为什么。。