5

以前の質問でelは、ブラウザーにパスワードを記憶させるために構成を使用する方法について説明しました。ただし、この構成はExtJS4.1にはel存在しません。

さて、私は何をすべきですか？

4

5 に答える 5

7

elではなくcontentElである必要があると思いますが、これは別の方法で行います。ExtJSを使用してすべてを直接構築できます。唯一の工夫は、Extフィールドがデフォルトでautocomplete = off属性で作成されることです。そのため、派生クラスを使用してそれをオーバーライドします。

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
        }]
    });
});
于 2012-08-20T11:06:50.300 に答える
6

lagnatからの回答はほとんど正しかったので、これをChromeとFirefoxでも機能させるには、次のものが必要です。

1）オートコンプリートのデフォルトのExtJSテキストフィールドの動作をオーバーライドします（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）テキストフィールドがタグ内にあることを確認します<form>:( lagnatからの回答を参照）ExtJS 4以降、<form>タグはFormPanelに存在しなくなりました。

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

3）同じ名前<form>のプレゼントがHTMLにあることを確認します。<input>

            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>

これらすべての変更が行われると、ユーザー名/パスワードの保存はIE、Chrome、Firefoxで機能します。

于 2012-09-28T07:33:23.433 に答える
1

ページ上の既存の要素にExtjsフィールドを適用できるようにするautoRenderプロパティがあります。したがって、基本フォームをhtmlで設定した場合、ブラウザはフォームのフィールドをログイン情報として認識する必要があります。正しいフィールド（およびボタン）を参照してautoRenderを使用すると、Extjsはそのフォームにオーバーレイされます。基本的なhtmlフォームの送信タイプボタンへのフォームで）正しく機能するはずです。また、ブラウザはおそらくログインのためのajax呼び出しを認識しないため、基本的なフォーム送信を使用する必要がある場合があることに注意してください。私のアプリケーションには実用的な例がありますが、アプリケーション固有のコードを引き出すのに苦労するので、ここに例を示します。例が必要な場合はコメントしてください。月曜日までにご連絡できる場合があります。

于 2012-08-17T21:36:18.440 に答える
0

@Lagnatによる回答は、ExtJS4.2.1および4.2.2では機能しません。typeボタンから設定が削除されたことが原因である可能性があります。必要なのは、ボタンの標準の送信ボタン<input type="submit">です。そこで、ボタンに。を付けて追加しましたopacity: 0。以下は私の動作コードです（Firefox 27、Chrome 33、Safari 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;'
                });
            }
        }
    }]
});
于 2014-02-27T11:13:21.123 に答える
-2

ExtJSに組み込まれているCookie機能を使用することをお勧めします。

  • 次のコマンドを使用してCookieを読み取ることができます。readCookie（'password）;
  • 次を使用してCookieを作成できます。createCookie（'password'、 "pass123"、30）; //30日間保存

次に、基本的なビジネスロジックを使用して、保存されているパスワードをformFieldに自動入力できます。

それは理にかなっていますか？

于 2012-08-15T16:12:43.677 に答える