1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    9
    Vote Rating
    0
    hakimio is on a distinguished road

      0  

    Default [Ext 4] Simple Textfield character counter

    [Ext 4] Simple Textfield character counter


    This simple plugin displays remaining character count (maxLength has to be set) next to a textfield.
    It's pretty rough in current state and one of the reasons I am posting it is to get some feedback.

    Current version has few drawbacks:
    • Character count is not updated when textfield value is set by loading a record to a form (updateCounter has to be manually called)
    • It doesn't automatically reduce input width to accommodate the counter width. The right textfield width has to be manually set.
    • Only compatible with ExtJS 4. Doesn't work correctly with 5.
    I know that I could use (X)Templates to add the counter to the field (afterSubTpl?) but I am not sure how to efficiently update it when textfield value changes. Suggestions how the plugin could be improved are highly appreciated.

    PHP Code:
    Ext.define('Ext.ux.plugins.CounterTextField', {
        
    extend'Ext.util.Observable',
        
    alias'plugin.counter',

        
    constructor: function (config)
        {
            
    Ext.apply(thisconfig || {});
            
    this.callParent(arguments);
        },

        
    init: function (field)
        {
            
    field.on({
                
    scopefield,
                
    keyupthis.updateCounter,
                
    focusthis.updateCounter
            
    });
            if (!
    field.rendered)
                
    field.on('afterrender'this.handleAfterRenderfield);
            else
                
    this.handleAfterRender(field);
        },

        
    handleAfterRender: function(field)
        {
            
    field.counterEl field.bodyEl.createChild({
                
    tag'span',
                
    style'padding-left:10px;top:4px;position:absolute;',
                
    htmlfield.maxLength
            
    });
            
    field.enableKeyEvents true;
        },

        
    updateCounter: function(textField)
        {
            
    textField.counterEl.update('' +
                 (
    textField.maxLength textField.getValue().length));
        }
    }); 
    Here is a usage example: https://fiddle.sencha.com/#fiddle/82v

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,129
    Vote Rating
    59
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    Looks handy! Thanks for sharing with the community.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1

Tags for this Thread