Как связать данные в текстовой области ExtJS - PullRequest
Новая
       6

Как связать данные в текстовой области ExtJS

0 голосов
/ 13 сентября 2018

Я хочу отображать текст в текстовой области с текущей длиной и максимумом, как это 10/150.Для этого я использую config 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'
    }

},

Но когда я добавляю элемент данных в bind, текстовое поле не отображается.Помогите мне, пожалуйста, решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Вот решение, которое полностью использует привязку: 

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 .

0 голосов
/ 14 сентября 2018

Вы можете использовать fieldLabel с привязкой, а внутри fieldLabel вы можете добавить свой собственный HTML-тег. И после этого вы можете применить CSS, чтобы разместить правильное местоположение. Как это 

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

Вы можете проверить здесь с рабочим Fiddle .

КОД 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);
                    }
                }
            }]
        });
    }
});
...