Question

我有一个由ajax商店支持的基本组合框。我希望能够从组合中选择一个空值作为选项（它不作为商店中的记录存在）。设置emptyText: 'None'将是完美的，唯一的问题是，一旦您选择了某个值，您就不能再选择一个空值了。

有没有比收听商店负载和注入额外的空记录更好的选择，或者那种性质的东西。我不想在该商店中永久保留空记录，只有在某些组合框中使用时才会显示。

{
    xtype: 'combo',
    queryMode: 'local',
    triggerAction: 'all',
    forceSelection: true,
    editable: false,
    emptyText: 'None',
    store: 'MyStore',
}

Answer 1

我通过创建插件来实现这一目标。

Ext.define("App.ux.plugin.form.field.EmptiableComboBox", {
    extend : 'Ext.AbstractPlugin',
    alias : 'plugin.emptiableCombo',
    init : function(combo) {
        this.combo = combo;
        this.callParent();
        combo.addListener('change', function() {
            if (this.getValue() === null || this.getValue() == '') {
                this.reset();
                this.setRawValue(null);
                this.lastSelection = [];
            }
        });
    }
});

以下是我如何使用它。

{   
    type:'combobox',
    typeAhead:true,
    plugins: ['emptiableCombo'],
    listConfig:{
        cls:'x-combo-boundlist-small'
    }
}

<强>更新我之前已经完成了这个练习，并且肯定我们不想添加空值选项。所以我们留下了2个选项

为可以清空的组合添加清除触发器。
使Combobox可编辑并启用forceSelection，这样用户可以轻松键入自动选择的值，并且如果该字段是可选的，他还可以清除值。启用forceSelection后，用户无法输入任意值。

我们选择了2并创建了这个插件。如果您提出任何其他更好的解决方案，请在此处发布。 THX。

Answer 2

我就是这样做的：

Ext.define('Ext.form.field.EmptyableComboBox', {
  extend: 'Ext.form.field.ComboBox',

  xtype: 'emptyable_combobox',

  uses: [ 'Ext.view.BoundList' ],

  /** The source is used to hold the original store. */
  _source: null,

  editable: false, // must pick from an item in the list
  allowBlank: true, // obviously can't be required, as the user can reset to blank.

  initComponent: function() {
    this._source = this.getStore();

    var newData = [ 
      this._toEntry(null, null)
    ];

    this._source.each(function(record) {
      newData.push(this._toEntry(record.get(this.valueField), record.get(this.displayField)));
    }, this)

    this.store = new Ext.data.Store({
      fields: [ this.valueField, this.displayField ],
      data: newData
    });


    var itemCls = Ext.view.BoundList.prototype.itemCls;
    var innerTpl = Ext.view.BoundList.prototype.getInnerTpl;
    this.listConfig = Ext.apply({
      tpl: new Ext.XTemplate(
          '<ul class="' + Ext.plainListCls + '">',
          '<tpl for=".">',
            '<li role="option" unselectable="on" class="' + itemCls + '">',
              '<tpl if="name == null">',
                '<em>' + this.emptyText + '</em>',
              '<tpl else>',
                innerTpl(this.displayField),
              '</tpl>',
            '</li>',
            '<tpl if="name == null">',
              '<hr />',
            '</tpl>',
          '</tpl>',
          '</ul>'
        )
    }, this.listConfig);

    this.callParent(arguments);
  },

  _toEntry: function(value, display) {
    var result = {}
    result[this.valueField] = value;
    result[this.displayField] = display;
    return result;
  }
})

如果您需要支持原始商店的过滤，您需要做一些更复杂的事情，但这应该指向您正确的方向。

请注意，如果您的ComboBox为editable（例如，您允许用户键入），则只需清除文本即可执行空值。这就是为什么此实现会将editable值硬编码为false。

什么是最干净的方式？＃34;空＆＃34; Extjs6中的组合框选项？

2 个答案: