1

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

http://jsfiddle.net/gfrobenius/WxNDf/1/

我需要做的是使此代码可重用，以便所有文本区域都获得此功能，但我仍然能够更改标签、名称、id、maxLength 等正常设置......这是否意味着将其变成一个类，插件、组件（抱歉还在学习术语）？我的 afterLabelTextTpl 可以做得更简单吗？我见过这样的例子：

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

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

4

1 回答 1

0

您可以制作自己的组件并从 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/

于 2013-03-28T18:57:04.030 回答