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

ドキュメントに記載されていますが、コードに組み込む方法がわかりません。また、テキスト カウントを更新する 3 つの関数には、「gtext」にハードコードされたコンポーネントを取得するための行と、ハードコードされた「countDownSpan」を取得するための行があることがわかります。親アイテムだけを知ってもらうにはどうすればよいですか?

4

1 に答える 1

0

独自のコンポーネントを作成し、テキストエリアから拡張できます。また、コールバック関数で同じことを 3 回実行しています。また、テキストエリアの 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 に答える