Tagfield Cursor is not coming at current line

Question

I am using tagfield and after selecting two or three values my curser moving to down. I want my cursor in same line even if a bit of space is there and after type or select any value then it move to down. Can anybody help me how to get this. I have specify the specific width also.

My Code :

{   xtype: Tagfield,
    growMax  : 10,
    valueField: 'title',
    displayField: 'title',
    parentGrid : me,
    queryMode: 'local',
    autoLoadOnValue:true, 
    multiSelect: true,
    isFilterDataLoaded: false,
    disabled: true,
    triggers: {
        clear: {
            weight: -30,
            cls: 'button-cross',
            handler: function(){
               this.clearValue();
            }
        }
    },
}

Here is my fiddler: TagfieldFiddle. Step to reproduce : 1. Select three tags. 2. For fourth tag cursor is going to next line. I want cursoer should be in first line.

One specific reason for downvote. . – David May 25 '17 at 11:00 — David, May 25 '17 at 11:00

score 0 · Answer 1 · answered May 25 '17 at 10:40

You have to resize the input field according to the text that has been entered. Since the input field is an Ext.dom.Element, you will have to check that this works in all browsers:

listeners:{
    afterrender: function(tagfield) {
        var minWidth = 10, // modify here for adjustable text field width
            el = Ext.getBody().createChild(),
            measurer = new Ext.util.TextMetrics(el);
        tagfield.inputEl.setWidth(minWidth);
        tagfield.inputEl.on('keyup', function() {
            var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
            tagfield.inputEl.setWidth(requiredWidth+minWidth);
        });
        tagfield.on('change', function() {
            var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
            tagfield.inputEl.setWidth(requiredWidth+minWidth);
        });
    }
}

Try it here: https://fiddle.sencha.com/#view/editor&fiddle/20cb

I have changed the ExtJS version because there seems to be a bug in tag field in ExtJS 6.0 - if you enter through keyboard, the content of the input is not removed after selection.

This answer is fantastic, but I can not resize my tag field because I am using it as widget on grid column so I given ` growMax : 10,` as well. Well I will try to modify as much I can. Thanks — David, May 25 '17 at 10:57
And when I modified as per your answer as per my requirement I got the same answer, https://fiddle.sencha.com/#view/editor&fiddle/20cf — David, May 25 '17 at 11:25
My answer is not resizing the tag field, it is resizing the input element. That's helluva difference. — Alexander, May 25 '17 at 13:12

Tagfield Cursor is not coming at current line

1 Answers1