PDA

View Full Version : Ext 3.3 Textfield character counter plugin.



erizvi
18 Jan 2011, 4:19 PM
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
21 Mar 2011, 7:44 PM
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
16 Sep 2011, 3:10 AM
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
17 May 2012, 2:25 AM
null

tameshwar
17 May 2012, 2:33 AM
xtype: 'textareafield',
plugins: {plugins: new Ext.ux.Counter()}

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