ExtJS 4: even browser not prompt to save entered data into forms fields

Question

ExtJS 4.1.1a

Simple authorization form (login & passowrd).

Even browser not prompt to save entered login and password values unlike standard html form with input's.

Sample code: http://jsfiddle.net/AllanStark/mKMfh/1/

Ext.create('Ext.window.Window', {
  title: 'Test',
  height: 430,
  width: 335,
  bodyPadding: '20 0 0 0',
  draggable: false,
  resizable: false,
  closable: false,
  layout: {
    type: 'vbox',
    align: 'center'
  },
  bodyStyle: {
    background: '#FFFFFF'
  },
  items: [{
    xtype: 'image',
    width: 150,
    height: 150,
    src: 'images/logo.gif'
  },{
    xtype: 'form',
    url: 'login.php',
    standardSubmit: true,
    border: 0,
    width: 170,
    padding: '20 0 20 0',
    defaultType: 'textfield',
    layout: 'vbox',
    fieldDefaults: {
      labelAlign: 'top',
      msgTarget: 'qtip',
      width: '100%'
    },
    items: [{
      xtype:'textfield',
      fieldLabel: 'Login',
      name: 'login',
      allowBlank: false
    },{
      xtype:'textfield',
      fieldLabel: 'Password',
      name: 'pass',
      inputType: 'password',
      allowBlank: false,
      listeners: {
        specialkey: function(field, e){
          if (e.getKey() == e.ENTER) {
            var form = field.up('form').getForm();
            form.submit();
          }
        }
      }
    }],
    buttons: [{
      text: 'Ok',
      formBind: true,
      disabled: true,
      handler: function() {
        var form = this.up('form').getForm();
        form.submit();
      }
    },{
      text: 'Reset',
      handler: function() {
        this.up('form').getForm().reset();
      }
    }]
  }]
}).show();

hm... The values are passed correct. Is it working when you remove the session_start()? — devOp, Jan 03 '13 at 10:43
In all my browsers (latest IE, Chrome, FF, Opera, Safari) the option to save sites passwords are enable. In php file - even if it is empty, the login and password do not save or prompted to save in browsers... — Allan Stark, Jan 03 '13 at 10:46

devOp · Answer 1 · 2013-01-03T11:27:05.600

To open the password dialog the html-attribut autocomplete must be "on". In Extjs its "off" and there's no method to change it only a 'workaround'. So add this event to the listeners of password and username:

afterrender:function(cmp){
   cmp.inputEl.set({
       autocomplete:'on'
   });
}

Ext.create('Ext.window.Window', {
  title: 'Test',
  height: 430,
  width: 335,
  bodyPadding: '20 0 0 0',
  draggable: false,
  resizable: false,
  closable: false,
  layout: {
    type: 'vbox',
    align: 'center'
  },
  bodyStyle: {
    background: '#FFFFFF'
  },
  items: [{
    xtype: 'image',
    width: 150,
    height: 150,
    src: 'images/logo.gif'
  },{
    xtype: 'form',
    url: 'login.php',
    standardSubmit: true,
    border: 0,
    width: 170,
    padding: '20 0 20 0',
    defaultType: 'textfield',
    layout: 'vbox',
    fieldDefaults: {
      labelAlign: 'top',
      msgTarget: 'qtip',
      width: '100%'
    },
    items: [{
      xtype:'textfield',
      fieldLabel: 'Login',
      name: 'login',
      allowBlank: false,
      listeners: {
        // ------
        afterrender:function(cmp){
            cmp.inputEl.set({
                 autocomplete:'on'
            });
       }
       // ------
      }
    },{
      xtype:'textfield',
      fieldLabel: 'Password',
      name: 'pass',
      inputType: 'password',
      allowBlank: false,
      listeners: {
        specialkey: function(field, e){
          if (e.getKey() == e.ENTER) {
            var form = field.up('form').getForm();
            form.submit();
          }
        },
        // ------
        afterrender:function(cmp){
            cmp.inputEl.set({
                 autocomplete:'on'
            });
       }
       // ------
      }
    }],
    buttons: [{
      text: 'Ok',
      formBind: true,
      disabled: true,
      handler: function() {
        var form = this.up('form').getForm();
        form.submit();
      }
    },{
      text: 'Reset',
      handler: function() {
        this.up('form').getForm().reset();
      }
    }]
  }]
}).show();

In the listener of the username and the password field. Have a look at the complete example. — devOp, Jan 03 '13 at 11:28
I just found this question: http://stackoverflow.com/questions/11965919/browser-does-not-remember-password-during-login — devOp, Jan 03 '13 at 14:40
Sorry twice, but it did not work too... And I see, that autocomplete option in buttons (Enter and Reset) are set to off. May be this is cause? — Allan Stark, Jan 08 '13 at 14:40

ExtJS 4: even browser not prompt to save entered data into forms fields

1 Answers1