Extjs标记域禁用水平增长

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