Question

我是Ext Js的新手，如果我的某些事情的术语不正确，请原谅我。我需要的是文本计数器。这是我到目前为止所拥有的......

我需要做的是让这段代码可以重复使用，以便所有textareas都能获得此功能，但我仍然可以更改标签，名称，id，maxLength等常规设置...这是否意味着将其转换为一个类，插件，组件（抱歉还在尝试学习术语）？我的afterLabelTextTpl可以更简单吗？我见过这样的例子：

var tpl = new Ext.Template('Name: {name}, Age: {age}');
tpl.apply({name: 'John', age: 25});

文档中的

但不确定如何将其合并到我的代码中。另外，在我更新文本计数的三个函数中，您可以看到我将用于将组件硬编码为“gtext”的行以及用于获取“countDownSpan”硬编码的行。我如何让他们只知道父项？

Answer 1

您可以制作自己的组件并从textarea扩展。你在回调函数中也做了3次相同的事情。你的textarea的id应该是唯一的。

以下是您的组件的示例：

Ext.define('MyApp.ux.form.field.TextArea', {
    alias: 'widget.textareacounter',
    extend: 'Ext.form.field.TextArea',
    labelAlign: 'top',
    enableKeyEvents: true,
    enforceMaxLength: false,
    maxLength: 1000,

    constructor: function(config) {
        var me = this;
        Ext.apply(me, config);
        me.afterLabelTextTpl = ['<span style="margin-left:5px;">(' + me.maxLength + ' char. left)</span>'];
        me.callParent()
    },

    initComponent: function () {
        var me = this;
        me.on({
            keydown: me.calculateCharsLeft,
            keyup: me.calculateCharsLeft,
            afterrender: me.calculateCharsLeft,
            scope: me
        });
        me.callParent();
    },

    calculateCharsLeft: function (textfield, e) {
        var me = this;
        var span = Ext.dom.Query.select('span', me.getEl().dom)[0];
        var remaining = me.maxLength - me.getValue().length;
        span.innerHTML = '(' + remaining + ' char. left)';
    }
});

还有一个工作小提琴：http://jsfiddle.net/johanhaest/cpLvK/2/

Sencha Ext Js - 添加span / div以形成字段模板，然后动态更改文本计数器的内容

1 个答案: