Question

当我选择值时，我创建了一个多选组合框，然后用逗号分隔显示这些组合框，但现在我希望它们在快照中更加时尚。 Snapshot

Answer 1

如果您使用Extjs 5/6，则可以使用新的tagfield（请参阅文档中的历史记录）：

标记字段是为多值编辑而改进的组合框，选择和轻松管理。

如果您使用Extjs 4，请查看Sencha论坛中的BoxSelect主题。

Answer 2

您可以在声明中使用xtype：'tagfield'将选定的值放在带有十字图标的框中。下面是代码示例。

Ext.create('Ext.form.Panel', {
      renderTo: Ext.getBody(),
      title: 'GOT',
      height: 200,
      width: 500,
      items: [{
          xtype: 'tagfield',
          fieldLabel: 'Character Name',
          store: Ext.create('Ext.data.Store', {
                  fields: ['id','name'],
                  data: [
                      {id: 0, name: 'John Snow'},
                      {id: 1, name: 'Tyrion Lannister'},
                      {id: 2, name: 'Morgan Dexter'},
                      {id: 3, name: 'Lannister'},
                      {id: 4, name: 'Silicon Vally'}
                  ]
               }),
           displayField: 'name',
          valueField: 'id',
          queryMode: 'local',
          filterPickList: true
      }]
  });

此链接中的工作示例。 MultipleSelection Example

在extjs multiselect组合框中我如何将选中的值放在带有十字图标的框中（检查快照）

2 个答案: