Results 1 to 4 of 4

Thread: Ext.plugin.extjs.form.PasswordStrength

  1. #1
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating

    Default Ext.plugin.extjs.form.PasswordStrength

    A simple plugin that will change the background color of a TextField based on the score of the value entered. On every keystroke, this plugin will test that value against 16 tests and scores it.


    Ext.apply(Ext.form.VTypes, {
        strength     : function(val, field) {
            return field.score > field.strength;
        strengthText : "Password is not strong enough"
    Ext.onReady(function() {
        var form = Ext.create("Ext.form.FormPanel", {
            renderTo    : Ext.getBody(),
            width       : 300,
            title       : "Password Strength Plugin",
            defaultType : "textfield",
            defaults    : {
                anchor    : "99%",
                msgTarget : "side"
            items       : [
                    fieldLabel : "Username"
                    fieldLabel : "Password",
                    inputType  : "password",
                    vtype      : "strength",
                    strength   : 24,
                    plugins    : {
                        ptype : "passwordstrength"
    You can override the colors use by doing this, I don't claim to be an artist:

    plugins : {
        ptype  : "passwordstrength",
        colors : ["C11B17", "FDD017", "4AA02C", "6AFB92", "00FF00"]
    There must be 5 values. The score will also be appended to the field so you can do a VType.

    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  2. #2
    Sencha User rogersja's Avatar
    Join Date
    Sep 2008
    Winnipeg, MB
    Vote Rating


    That is really neat!

    One suggestion, would be to, in some fashion. Show the user that there are multiple levels of acceptable passwords. without knowing that there are 5 levels, a use may simply stop at the first green level, and not know they could make something stronger.

  3. #3
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Haan, Germany
    Vote Rating


    Hi Mitchell,

    this is a cool thing as passwordstrength is an important one to prevent being hacked.

    While testing it i have an issue from usability:

    * if you color the background it's difficult to see the input, it would be needed to calculate the complementary color for text color
    * the colors are fancy but need description. The user might think: That's funny, i get changing colors. But he don't understand what's about, you would need to descibe that.

    I think the simplest way to display passwordstrength is kind of filled bar beside with
    bad .......... good label beside, so it's easy to understand while typing.
    vg Steffen
    Release Manager of TYPO3 4.5

  4. #4
    Ext JS Premium Member yyjia's Avatar
    Join Date
    Oct 2008
    Greater Boston Area
    Vote Rating


    I modified the code from 1.x forum ( here: ) . I created a password meter widget that is Ext 4 compatible. You can check it from my blog post.
    With a quick test, it works fine. I have not done extensive test on it. Please let me know if you test on it and find any issue.
    Thanks and regards,

    Yiyu Jia

Similar Threads

  1. Ext.plugin.extjs.FIleDrop
    By mitchellsimoens in forum Ext:User Extensions and Plugins
    Replies: 23
    Last Post: 21 Nov 2014, 6:17 AM
  2. [PLUGIN] Ext.plugin.extjs.GridClick
    By mitchellsimoens in forum Ext:User Extensions and Plugins
    Replies: 0
    Last Post: 16 Mar 2011, 10:17 AM
  3. Eclipse's Extjs plugin anybody knows one?
    By andredecotia in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Dec 2010, 5:40 AM
  4. How to create plugin for ExtJS
    By martinfeng in forum Ext 3.x: User Extensions and Plugins
    Replies: 4
    Last Post: 7 Nov 2010, 9:16 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts