ब्राउज़र को लॉगिन के दौरान पासवर्ड याद नहीं है

Question

एक earlier question ब्राउज़र को पासवर्ड याद रखने के लिए el कॉन्फ़िगरेशन का उपयोग करके एक विधि का उल्लेख किया गया है। Howewer, el कॉन्फ़िगरेशन अब ExtJS 4.1 में मौजूद नहीं है।

अब, मुझे क्या करना चाहिए?

Answer 1

मेरा मानना ​​है कि यह होना चाहिए contentEl बजाय के एल लेकिन मैं इस एक और तरीका है। आप पूरी चीज़ को एक्स्टजेस के साथ सीधे बना सकते हैं। एकमात्र मोड़ यह है कि एक्स फ़ील्ड autocomplete = डिफ़ॉल्ट रूप से विशेषता के साथ बनाया जाएगा, इसलिए मैं उस व्युत्पन्न क्लास का उपयोग ओवरराइड करने के लिए करता हूं।

Ext.define('ACField', { 
    extend: 'Ext.form.field.Text', 

    initComponent: function() { 
     Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) { 
      if (Ext.isString(oneTpl)) { 
       allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"'); 
      } 
     }); 
     this.callParent(arguments); 
    } 
}); 

Ext.onReady(function() { 
    new Ext.panel.Panel({ 
     renderTo: Ext.getBody(), 
     width: 300, 
     height: 100, 
     autoEl: { 
      tag: 'form', 
      action: 'login.php', 
      method: 'post' 
     }, 
     items: [ 
      new ACField({ 
       xtype: 'textfield', 
       name: 'username', 
       fieldLabel: 'Username' 
      }), 
      new ACField({ 
       xtype: 'textfield', 
       name: 'password', 
       fieldLabel: 'Password', 
       inputType: 'password' 
      }), 
     ], 
     buttons: [{ 
      xtype: 'button', 
      text: 'Log in', 
      type: 'submit', 
      preventDefault: false 
     }] 
    }); 
}); 

Answer 2

मैं ExtJS की अंतर्निहित कुकी कार्यक्षमता का उपयोग करने की अनुशंसा करता हूं।

• आप कुकी का उपयोग करके कुकी पढ़ सकते हैं: readCookie ('password);
• आप कुकी का उपयोग कर बना सकते हैं: createCookie ('password', "pass123", 30); // 30 दिनों के लिए

फिर आप संग्रहीत पासवर्ड के साथ अपने फॉर्म फ़ील्ड को स्वत: पॉप्युलेट करने के लिए मूल व्यावसायिक तर्क का उपयोग कर सकते हैं।

क्या यह समझ में आता है?

Answer 3

ऑटोरेंडर प्रॉपर्टी है जो आपको पृष्ठ पर पहले से मौजूद तत्व के लिए Extjs फ़ील्ड को लागू करने की अनुमति देगी। इसलिए यदि आप एचटीएमएल में अपना मूल रूप स्थापित करते हैं, तो ब्राउजर को लॉग इन जानकारी के रूप में फॉर्म के लिए फ़ील्ड को पहचानना चाहिए, और फिर एक्स्टजेज उस फॉर्म पर ओवरले हो जाएंगे यदि आप सही फ़ील्ड के संदर्भ में ऑटोरेंडर का उपयोग करते हैं (और बटन भी फॉर्म पर अपने मूल HTML फॉर्म में सबमिट प्रकार बटन पर) इसे सही तरीके से काम करना चाहिए। साथ ही, ध्यान रखें कि ब्राउज़र शायद लॉग इन करने के लिए AJAX कॉल को पहचाना नहीं जाएगा और आपको मूल फ़ॉर्म सबमिशन का उपयोग करने की आवश्यकता हो सकती है। मेरे पास मेरे आवेदन में एक कामकाजी उदाहरण है, लेकिन मुझे एप्लिकेशन विशिष्ट कोड खींचने का प्रयास करने में कठिनाई होगी, इसलिए यहां एक उदाहरण है। अगर आपको उदाहरण की आवश्यकता है तो कृपया टिप्पणी करें और मैं सोमवार तक आपसे वापस आ सकता हूं।

Answer 4

lagnat से जवाब ज्यादातर सही था, इसे पाने के लिए Chrome और Firefox पर काम कर निम्नलिखित की जरूरत है:

1) अवहेलना डिफ़ॉल्ट स्वत: पूर्ण के लिए ExtJS Textfield व्यवहार (lagnat से नकल):

Ext.define('ACField', { 
    extend: 'Ext.form.field.Text', 

    initComponent: function() { 
     Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) { 
      if (Ext.isString(oneTpl)) { 
       allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"'); 
      } 
     }); 
     this.callParent(arguments); 
    } 
}); 

2) यकीन है कि textfields एक <form> टैग के भीतर हैं:, (lagnat से उत्तर देखें) ExtJS 4 के बाद से <form> टैग नहीं रह गया है FormPanel में ही मौजूद है।

autoEl: { 
     tag: 'form', 
     action: '/j_spring_security_check', 
     method: 'post' 
    }, 

3) यकीन है कि वहाँ एक ही नाम के साथ <input> है HTML में एक <form> वर्तमान, बनाओ:

  items:[ 
       Ext.create('ACField',{ 
        fieldLabel: 'Username', 
        name:'j_username', 
        inputId: 'username', 
        allowBlank:false, 
        selectOnFocus:true 
       }), 
       Ext.create('ACField',{ 
        fieldLabel:'Password', 
        name:'j_password', 
        inputId: 'password', 
        xtype:'textfield', 
        allowBlank:false, 
        inputType:'password' 
       }) 
      ], 

और HTML के भीतर एक ही इनपुट नाम के साथ नियमित रूप से प्रपत्र:

<body> 
<div id="login-panel"> 
    <form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post"> 
     <input class="x-hidden" type="text" id="username" name="j_username"/> 
     <input class="x-hidden" type="password" id="password" name="j_password"/> 
    </form> 
</div> 
<noscript>Please enable JavaScript</noscript> 
</body> 

आईई, क्रोम और फ़ायरफ़ॉक्स में उपयोगकर्ता नाम/पासवर्ड को सहेजने के साथ ही इन सभी परिवर्तनों के साथ।

Answer 5

@Lagnat द्वारा उत्तर ExtJS 4.2.1 और 4.2.2 के लिए काम नहीं करता है। यह बटन से type कॉन्फ़िगरेशन को हटाने के कारण हो सकता है। बटन के लिए हमें मानक सबमिट बटन <input type="submit"> की आवश्यकता है। तो मैंने इसे opacity: 0 के साथ बटन पर जोड़ा। नीचे मेरे कार्य कोड है (परीक्षण किया फ़ायरफ़ॉक्स 27, क्रोम 33, सफारी 5.1.7 पर काम कर रहे, IE 11. स्वत: भरण/स्वत: सहेजना पासवर्ड ब्राउज़र के लिए सक्षम होना चाहिए):

Ext.create('Ext.FormPanel', { 
    width: 400, 
    height: 500, 
    padding: '45 0 0 25', 
    autoEl: { 
     tag: 'form', 
     action: 'login.php', 
     method: 'post' 
    }, 
    renderTo: Ext.getBody(), 
    items: [{ 
     xtype: 'textfield', 
     fieldLabel: 'Username', 
     name: 'username', 
     listeners: { 
      afterrender: function() { 
       this.inputEl.set({ 
        'autocomplete': 'on' 
       }); 
      } 
     } 
    }, { 
     xtype: 'textfield', 
     fieldLabel: 'Password', 
     inputType: 'password', 
     name: 'username', 
     listeners: { 
      afterrender: function() { 
       this.inputEl.set({ 
        'autocomplete': 'on' 
       }); 
      } 
     } 
    }, { 
     xtype: 'button', 
     text: 'LOG IN', 
     width: 100, 
     height: 35, 
     preventDefault: false, 
     clickEvent: 'click', 
     listeners: { 
      afterrender: function() { 
       this.el.createChild({ 
        tag: 'input', 
        type: 'submit', 
        value: 'LOG IN', 
        style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;' 
       }); 
      } 
     } 
    }] 
});