ExtJS的：與「記住我」的功能

Question

我試圖創建一個很常見的一個簡單的登錄窗口中「記住我」功能登錄。登錄驗證完成AJAX樣式，因此瀏覽器不會記住我的輸入。

我的方法是使用內置的state功能，但如何使用它混淆了我。

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ 
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now 
})); 

... 

{ 
    xtype: 'textfield', 
    fieldLabel: 'User name', 
    id: 'txt-username', 
    stateful: true, 
    stateId: 'username' 
}, { 
    xtype: 'textfield', 
    fieldLabel: 'Password', 
    id: 'txt-password', 
    inputType: 'password', 
    stateful: true, 
    stateId: 'password' 
}, { 
    xtype: 'button', 
    text: 'Validate', 
    stateEvents: 'click' 
} 

我知道我必須實現getState的方法，但是什麼成分（我的猜測是對兩個文本框）？我還沒有意識到的另一件事是，我的點擊事件按鈕連接到我的文本域的狀態屬性？

Answer 1

請勿使用狀態。您將用戶的密碼以純文本形式存儲在瀏覽器的Cookie中。任何有權訪問瀏覽器的人都可以閱讀，並在每個請求中將其發送回服務器。

希望你正在使用某種形式的服務器端的會話，並且不依賴於用戶的認證信息存在於每一個請求，以保持登錄狀態。如果是這樣，那麼我建議您利用內置於大多數現代瀏覽器中的密碼保存功能來處理用戶在任何給定會話中進行初始身份驗證的記憶。

對於瀏覽器的密碼保存功能工作的認證形式必須存在於文件中第一次加載頁面時。此外，憑據必須以傳統（非AJAX）提交形式提交，它將刷新整個頁面。

可滿足這些要求，同時還通過初次呈現隱入文檔的形式，然後使用的ExtJS的能力征用現有的HTML元素呈現形式ExtJS的UI。

在文檔的身體放：

<form id="auth-form" action="/url/of/your/login/action" method="POST"> 
    <input id="auth-username" type="text" name="username" class="x-hidden"> 
    <input id="auth-password" type="password" name="password" class="x-hidden"> 
    <input id="auth-submit" type="submit" class="x-hidden"> 
</form> 

然後，在Ext.onReady或當時正在顯示的驗證形式建立一個面板，其利用上述形式的元素：

new Ext.Panel({ 
    el: 'auth-form', 
    autoShow: true, 
    layout: 'form', 
    items: [ 
     { 
      xtype: 'textfield', 
      el: 'auth-username', 
      autoShow: true, 
      name: 'username', 
      fieldLabel: 'Username', 
      anchor: '100%' 
     }, 
     { 
      xtype: 'textfield', 
      el: 'auth-password', 
      autoShow: true, 
      name: 'password', 
      fieldLabel: 'Password', 
      anchor: '100%' 
     } 
    ], 
    buttons: [ 
     { 
      text: 'Log in', 
      handler: function() { 
       Ext.get('auth-submit').dom.click(); 
      } 
     } 
    ] 
}); 

表單的確切組成可能會有所不同。它可能被構建到Ext.Window實例或其他任何內容中。什麼是重要的：

• 用戶名和密碼字段利用通過'el'和'autoShow'配置屬性的現有輸入字段。
• 其中一個包含這些字段的面板對現有的表單元素也是一樣的。
• 表單的提交是通過模擬點擊現有的提交按鈕來完成的。

Answer 2

這不會產生運行時錯誤IE 8工作。我不知道是否因爲我使用Google Frame，但我想指出el是公共屬性之一，而不是配置選項，所以我不認爲Ext的設計工作是這樣的。在谷歌瀏覽器中，您也可以選擇用戶名，但不顯示密碼。我認爲這是谷歌瀏覽器設計的一部分，但我也看到谷歌瀏覽器在其他網站上可以正常運行。我沒有使用AJAX提交表單，但我喜歡Ext textfields的外觀，我也喜歡工具提示。

我不明白這種方式比使用cookie更安全，因爲現在您如何實現它，密碼存儲在客戶端計算機上。明天，我將嘗試一個html5客戶端存儲解決方案。

讓網頁瀏覽器控制這個功能意味着不同的用戶可能根據他們有權訪問的瀏覽器有不同的體驗（主要討論谷歌瀏覽器如何處理保存密碼）。

總之非常好的帖子謝謝。

Answer 3

使用與阿賈克斯的funcionality：

{ 
    xtype: 'form', 
    autoEl: { 
     //normal post for false submit 
     tag: 'form', 
     action: "#", 
     method: 'post' 
    }, 
    items: [ 
     { 
      xtype: 'textfield', 
      name: 'username', 
      fieldLabel: 'Username', 
      listeners: { 
       afterrender:function(cmp){ 
        cmp.inputEl.set({ 
         autocomplete:'on' 
        }); 
       } 
      } 
     }, 
     { 
      xtype: 'textfield', 
      name: 'password', 
      inputType: 'password', 
      fieldLabel: 'Password', 
      listeners: { 
       afterrender:function(cmp){ 
        cmp.inputEl.set({ 
         autocomplete:'on' 
        }); 
       }, 
      } 
     }, 
     { 
      xtype: 'button', 
      text: 'Login', 
      handler: function() { 
       Ext.Ajax.request(); //login ajax request 
       Ext.get('falsesubmit').dom.click(); //false submit 
      }, 
     }, 
     { 
      //button with submit input for false submit 
      xtype: 'button', 
      hidden:true, 
      listeners: { 
       afterrender: function() { 
        this.el.createChild({tag: 'input', type: 'submit', id: 'falsesubmit'}); 
       } 
      } 
     } 
    ] 
}