Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

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