Extjs tagfield禁用水平增长

Question

我尝试在我的应用标记字段中设置：

Ext.define('ExtTagsField', {
    extend: 'Ext.form.field.Tag',
    store: Ext.create('Ext.data.Store', {fields: [], data: []}),
    hideTrigger: true,
    createNewOnBlur: true,
});

它看起来像：

但是当添加新标签时，宽度自动更新和所有框拉伸：

如何防止标记字段水平增长？

非常感谢

Answer 1

您可以为其设置宽度或maxWidth。

Answer 2

根据文档，您可以使用maxWidth

  

此组件的最大宽度；必须是有效的CSS长度值，例如：300、100px，30％等。如果设置为auto，它将宽度设置为null，这意味着它将具有自己的自然大小。请注意，如果组件被“定位”（绝对定位或居中），则此配置将不适用

因此您可以尝试以下操作：

Ext.define('ExtTagsField', {
    extend: 'Ext.form.field.Tag',
    store: Ext.create('Ext.data.Store', {fields: [], data: []}),
    hideTrigger: true,
    createNewOnBlur: true,
    maxWidth: 50%,
});

Answer 3

您可以使用maxWidth配置停止增长该田地。保持width和maxWidth相同将避免选择值时宽度增加和减少的麻烦。

下面是相同的工作示例。

var shows = Ext.create('Ext.data.Store', {
    fields: ['id','show'],
    data: [
        {id: 0, show: 'Battlestar Galactica'},
        {id: 1, show: 'Doctor Who'},
        {id: 2, show: 'Farscape'},
        {id: 3, show: 'Firefly'},
        {id: 4, show: 'Star Trek'},
        {id: 5, show: 'Star Wars: Christmas Special'}
    ]
});

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Sci-Fi Television',
    height: 200,
    width: 500,
    items: [{
        xtype: 'tagfield',
        fieldLabel: 'Select a Show',
        store: shows,
        displayField: 'show',
        valueField: 'id',
        queryMode: 'local',
        filterPickList: true,
        width: 400,
        maxWidth: 400
    }]
});