ExtJS如何在textarea中绑定数据

Question

我想在文本区域下显示当前长度和最大长度为 10/150 的文本。为此，我使用配置 afterSubTpl.

完整代码：

{
    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'
    }

},

但是当我在绑定中添加数据元素时，textarea 不显示。请帮我解决这个问题。

Answer 1

您可以将 fieldLabel 与绑定一起使用，并在 fieldLabel 内部放置您的自定义 html 标签。然后你可以应用 css 来放置适当的位置。像这样

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

你可以在这里检查工作Fiddle。

代码片段

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

Answer 2

这里有一个完全使用绑定的解决方案：

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.

ExtJS如何在textarea中绑定数据

How bind data in textarea ExtJS

extjs

extjs6-classic