5

Ext JS 2.xでラッパーUXコントロールを作成して、Ext.Form.DateFieldキーの押下を少し異なる方法で処理しました。特に、カレンダーが表示されているときに、Tabキーで強調表示された日付を選択して、次のフォームフィールドに移動する必要があります。

キーハンドラーが機能しています。強調表示された日付が選択されてカレンダーが閉じられますが、タブで次のフィールドに移動できません。

タブの順序から次のフィールドが何であるかを理解し、そのフォーカスを設定する必要がありますか？それはかなり複雑なようです。または、イベントを発生させて、コントロールを次のフィールドに自動的に移動させることはできますか（つまりTab、カレンダーでキーを押して処理し、それを基になる日付フィールドに転送します）？

編集：要約すると、特定のフォームフィールドでキーボードイベントを発生させるExt（または少なくともクロスプラットフォーム）の方法はありますか？

4

1 に答える 1

6

アプローチI.event.preventDefault()キープレス/キーアップイベントハンドラーで実行しないでください。ブラウザーがデフォルトのアクション、つまりタブナビゲーションを実行するのをブロックしないようにします。この例は機能します：

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        listeners: {
            specialkey: function(me, e) {
                if (e.getKey() == e.TAB) {
                        console.log('Tab key pressed!');
                        // do whatever you want here just don't do e.preventDefault() or e.stopEvent() if you want the browser tab to next control
                    }
            }
        }
    }, {
        xtype: 'textfield',
        name: 'email',
        fieldLabel: 'Email Address',
    }]
});

Ext 4で試しましたが、Ext 2以降、すべての重要なメソッドが利用できるはずです。それでも問題が発生する場合は、コードの一部を共有してください。

邪魔にならないようにして、ブラウザにネイティブに処理させることは、通常、最良かつ最も堅牢なソリューションです...

アプローチII。複数の要素を持つ複雑なコンポーネントがある場合でも、 CSS（ KeyNav / KeyMap ）を使用してポップアップ要素内のフォーカスアイテムをシミュレートしながら、メインの入力要素（通常はテキストフィールド）にフォーカスを強制することで、アプローチIのケースを実現できます。ここでは、メインの入力要素で便利です）。基本的に、ユーザーがポップアップにフォーカスを設定し（クリックするなど）、フォーカスをメイン要素にスナップバックする可能性があるすべてのケースをキャッチします。

これにより、一部がコンポーネントでない場合でも、html要素の自然なタブ順序が保証されます。それが最善の方法であり、ほとんどの場合達成するのに苦労する価値があると私は信じています。

これが、 ComboBoxやDatePickerなどのコンポーネントの動作方法です（後者は、値が更新された後、常にメイン要素にフォーカスを設定します。ComboBoxのフォーカスロジックはもう少し複雑です。ソースコードのリンクを見てください。コンポーネントに実装する方法について混乱している場合は、非常に洞察力があります。

アプローチIII。最後の手段。それでもプログラムで別の（隣接する）フィールドに焦点を合わせる必要がある場合は、比較的簡単です。Ext 2.3のコード（テストはしていませんが、ドキュメントを使用していました）：

var formPanel,  // containing form panel
    currentField, // the field you need to navigate away from

    fields,
    currentFieldIdx,
    nextField;

fields = formPanel.getForm().items;
currentFieldIdx = fields.indexOf(currentField);

if(currentFieldIdx > -1) {
    nextField = fields.itemAt(currentFieldIdx + 1);
    nextField && nextField.focus();
}

TabPS dispatchEvent（）を介して人為的にキーを押すことができますが、セキュリティ上の理由から、タブナビゲーションアクションはトリガーされません。

于 2012-10-26T16:19:11.723 に答える