Ext 3.3 Textfield character counter plugin.

[erizvi]

Hi,

I've created a plugin for textfield widget that updates a character counter displayed to the right of the textfield on every keyup event of the textfield. However, I'm not confident that this is the best approach/code, so I'm posting the code here for community to critique. Here is my code:

Counter.js

// create namespace for plugins
Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.Counter = function (config) {
    Ext.apply(this, config);
};

Ext.extend(Ext.ux.plugins.Counter, Ext.util.Observable, {
    init: function (field) {
        field.on({
            scope: field,
            keyup: this.onKeyUp,
            focus: this.onFocus
        });
        Ext.apply(field, {
            onRender: field.onRender.createSequence(function () {
                this.el.removeClass(['x-form-text','x-form-field','x-form-focus']);
                this.el.setHeight('inherit');
                this.el.setStyle('border','none');
                this.wrap = this.el.wrap({ 
                    tag: 'div', 
                    id: this.id + '-wrapper', 
                    cls: 'x-form-text x-form-field x-form-focus'
                 },true);
				this.enableKeyEvents = true;
            }),

            afterRender: field.afterRender.createSequence(function () {
               this.counter = Ext.DomHelper.append(Ext.get(this.wrap).id,{
                    tag: 'span',
                    style: 'color:#C0C0C0;padding-left:5px;',
                    html: this.maxLength + '/' + this.maxLength
                });
            }),
            onResize: field.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
                var counterWidth = Ext.get(this.counter).getWidth();
                this.el.setSize(adjWidth-counterWidth,adjHeight);
            })
        });
    },
     onKeyUp: function(textField,eventObj){
        Ext.get(this.counter).update(textField.getValue().length + '/' + textField.maxLength);
     },
     onFocus:function(textField){
      Ext.get(this.counter).update(textField.getValue().length + '/' + textField.maxLength);
     }
});

I've been using it inside EditorGridPanel.
Partial Code:

........
columns:[
{
header: "Verified", 
width: 20, 
menuDisabled: true,
dataIndex: 'Verified', 
editor: new Ext.form.TextField({
		maxLength: 20,
		plugins: new Ext.ux.plugins.Counter()
})
},
........

[JoyfulBobHome]

Very nice counter Thanks.

I implemented it and then right-justified the counter so it doesn't overlay the text. I also left-justified the typed text.

It would be nice if it wouldn't be twice as wide as needed- I tried to shorten the width to no avail.

Lastly, if the height could be about 20px; the same as other standard TextFields, that would be great.

All in all, a great plugin!

Thanks again!

[katamshut]

mmh, I tried to use it on a but it wasn't working:

Uncaught TypeError: Object #<Object> has no method 'init'

....
{
                    id: 'info',
                    name: 'info',
                    label: 'info',
                    xtype: 'textareafield',
                    plugins: {plugins: new Ext.ux.Counter()}
                }
...

do you know what I am doing wrong?

[tameshwar]

null

[tameshwar]

xtype: 'textareafield',
plugins: {plugins: new Ext.ux.Counter()}

that should be
,xtype: 'textarea'
,plugins: new Ext.ux.plugins.Counter()