How bind data in textarea ExtJS

Question

I want to display text under text area with length current and max like this 10/150 . For it I use config afterSubTpl.

Full code:

{
    xtype: 'textareafield',
    msgTarget: 'under',
    fieldLabel: __('text_sms'),
    itemId: 'smsTextField',
    allowBlank: false,
    setMaxLength: function(v) {
        this.maxLength = v;
    },
    getMaxLength: function() {
        return this.maxLength;
    },
    name: 'text-sms',
    bind: {
        data: {
            myMaxLength: '{myMaxLength}'
        },
        value: __('sms_text_template'),
        maxLength: '{myMaxLength}'
    },
    afterSubTpl: '<span>{length}/{myMaxLength}</span>',
    listeners: {
        change: 'onSMSTextChange'
    }

},

But when I'm add data element in bind, textarea not displaying. Help me pleas solve this problem.

Answer 1

Here is a solution that fully uses binding:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.FormPanel', {
            title: 'Display text under text',
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            viewModel: {
                formulas: {
                    curLen: get => get('value').length
                },
                data: {
                    labelText: 'Message',
                    maxLen: 150,
                    curLen: 0,
                    value: ''
                }
            },
            items: [{
                xtype: 'textareafield',
                maxLength: 150,
                bind: {
                    fieldLabel: '{labelText} <span class="show-counter">({curLen}/{maxLen})</span>',
                    value: '{value}'
                },
                anchor: '100%'
            }]
        });
    }
});

Fiddle.

Answer 2

You could use fieldLabel with binding and inside of fieldLabel you put your custom html tag. And after that you can apply css to place proper location. Like this

bind: {
    fieldLabel: '{labelText} <span class="show-counter">({curLen}/{maxLen})</span>'
},

You can check here with working Fiddle.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.FormPanel', {
            title: 'Display text under text',
            width: '100%',
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            viewModel: {
                data: {
                    labelText: 'Message',
                    maxLen: 150,
                    curLen: 0
                }
            },
            items: [{
                xtype: 'textareafield',
                //Maximum input field length allowed by validation.
                maxLength: 150,
                //True to set the maxLength property on the underlying input field. Defaults to false
                enforceMaxLength: true,
                bind: {
                    fieldLabel: '{labelText} <span class="show-counter">({curLen}/{maxLen})</span>'
                },
                anchor: '100%',

                listeners: {
                    change: function (f) {
                        var vm = f.up('form').getViewModel(),
                            len = f.getValue().length;

                        vm.set('curLen', len);
                    }
                }
            }]
        });
    }
});