Hybrid View

  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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar