ExtJS TagField下拉项选中后保留的实现及替代组件咨询

一、更简便的TagField实现方式 #

你不需要手动往store里加回记录，TagField本身就有配置项可以实现需求：设置filterPickList: false。

这个配置默认是true，作用是过滤掉已选中的选项；设为false后，下拉列表会保留所有选项，包括已经被选中添加为标签的项，这样就能重复选择同一个运算符或常量了。

示例代码：

Ext.create('Ext.form.field.Tag', {
    renderTo: Ext.getBody(),
    fieldLabel: '自定义计算公式',
    store: ['+', '-', '*', '/', '常量A', '常量B', '常量C'],
    filterPickList: false, // 核心配置：关闭已选选项过滤
    allowBlank: false,
    tagLabel: '已选内容'
});

如果需要选中后保持下拉框展开（方便连续选择），可以额外重写onItemSelect方法，加上展开逻辑：

Ext.define('MyApp.field.ReusableTagField', {
    extend: 'Ext.form.field.Tag',
    alias: 'widget.reusabletagfield',

    filterPickList: false,

    onItemSelect: function(record) {
        this.callParent([record]); // 执行默认的添加标签逻辑
        this.expand(); // 选中后保持下拉框展开
    }
});

二、更适合公式构建场景的替代组件 #

如果TagField的标签式交互不符合你的使用习惯，以下组件更适合公式自定义场景：

1. 按钮工具栏+文本框 #

把运算符、常量做成工具栏按钮，点击按钮就将对应内容追加到公式输入框（如TextArea），交互更直观，完全支持重复添加：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: '营收计算器',
    layout: 'vbox',
    padding: 10,
    items: [
        {
            xtype: 'textareafield',
            width: 450,
            height: 120,
            fieldLabel: '计算公式',
            labelAlign: 'top',
            emptyText: '点击下方按钮构建公式'
        },
        {
            xtype: 'toolbar',
            margin: '10 0 0 0',
            items: [
                {text: '+', handler: addToFormula},
                {text: '-', handler: addToFormula},
                {text: '*', handler: addToFormula},
                {text: '/', handler: addToFormula},
                '-', // 分隔符
                {text: '常量A', handler: addToFormula},
                {text: '常量B', handler: addToFormula},
                {text: '常量C', handler: addToFormula},
                '-',
                {text: '清空', handler: function(btn) {
                    btn.up('panel').down('textareafield').setValue('');
                }}
            ]
        }
    ]
});

// 复用的按钮点击逻辑
function addToFormula(btn) {
    var textarea = btn.up('panel').down('textareafield');
    textarea.setValue(textarea.getValue() + btn.getText());
}

2. 数据视图（Ext.view.View） #

如果可选的常量/运算符数量较多，可以用数据视图展示所有选项，点击任意项就追加到公式，同样支持重复选择：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: '营收计算器',
    layout: 'hbox',
    padding: 10,
    items: [
        {
            xtype: 'dataview',
            width: 150,
            store: Ext.create('Ext.data.Store', {
                fields: ['text'],
                data: [
                    {text: '+'}, {text: '-'}, {text: '*'}, {text: '/'},
                    {text: '常量A'}, {text: '常量B'}, {text: '常量C'}
                ]
            }),
            tpl: '<tpl for="."><div class="x-btn x-btn-default" style="margin: 4px;">{text}</div></tpl>',
            itemSelector: '.x-btn',
            listeners: {
                itemclick: function(view, record) {
                    var textarea = view.up('panel').down('textareafield');
                    textarea.setValue(textarea.getValue() + record.get('text'));
                }
            }
        },
        {
            xtype: 'textareafield',
            flex: 1,
            margin: '0 0 0 10',
            height: 200,
            fieldLabel: '计算公式',
            labelAlign: 'top'
        }
    ]
});

内容的提问来源于stack exchange，提问作者Kristián Štech