1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    9
    Vote Rating
    0
    erizvi is on a distinguished road

      0  

    Default Ext 3.3 Textfield character counter plugin.

    Ext 3.3 Textfield character counter plugin.


    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
    Code:
    // 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:
    Code:
    ........
    columns:[
    {
    header: "Verified", 
    width: 20, 
    menuDisabled: true,
    dataIndex: 'Verified', 
    editor: new Ext.form.TextField({
    		maxLength: 20,
    		plugins: new Ext.ux.plugins.Counter()
    })
    },
    ........

  2. #2

    Default Very nice!

    Very nice!


    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!

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Zürich, Switzerland
    Posts
    19
    Vote Rating
    0
    katamshut is on a distinguished road

      0  

    Default


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

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

    Code:
    ....
    {
                        id: 'info',
                        name: 'info',
                        label: 'info',
                        xtype: 'textareafield',
                        plugins: {plugins: new Ext.ux.Counter()}
                    }
    ...
    do you know what I am doing wrong?

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Location
    Pune
    Posts
    43
    Vote Rating
    0
    tameshwar is on a distinguished road

      0  

    Default


    null

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Location
    Pune
    Posts
    43
    Vote Rating
    0
    tameshwar is on a distinguished road

      0  

    Default


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

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

Similar Threads

  1. Simple HtmlEditor character counter plugin
    By FKilloran in forum Ext 2.x: User Extensions and Plugins
    Replies: 6
    Last Post: 17 May 2012, 1:50 AM
  2. [solved] Counter plugin wanted
    By ctp in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 11 Aug 2010, 12:06 PM
  3. [EXT 3.0.0] : TextArea character counter
    By JSCoder in forum Community Discussion
    Replies: 0
    Last Post: 7 Feb 2010, 10:54 PM
  4. Regarding html editor counter plugin usage
    By aomadevelopers in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 30 Nov 2009, 11:49 PM

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi