Ext.js拡張 ソフトウェアキーボード、KeyPad

Ext JS（JavaScript）でソフトウェアキーボードを実装する拡張機能です。
jQuery の KeyPad ライクな定義で実装できます。

Ext.js 3.2.1 で動作確認しています。
3系、2系でも問題ないと思いますが、問題あったらご連絡ください。

ダウンロード。（ESET NOD32 定義5337 で検査済みです。 ）
keypad.zip

Ext.us.form.KeyPad version 1.1.3 Lastupdate 08.03.2010

***
 + example/
 + resources/
   + css/
    + ux/
     + keypad.css

 + source/
   + widgets/
    + ux/
     + keypad.js

Sample

Default

デフォルト設定の場合、QWERTYキーボードを実装します。

Source:

new Ext.FormPanel({
	labelWidth: 75,
	frame:true,
	title: 'Default KeyPad sample',
	bodyStyle:'padding:5px 5px 0',
	width: 350,
	defaults: {width: 230},
	defaultType: 'textfield',
	renderTo: 'keypad1',

	items: [{
		fieldLabel: 'Keypad',
		name: "keypad",
		xtype: "keypadfield",
		listeners: {'push': function() {
			Ext.MessageBox.alert('Event', 'ボタン押し込み時に、beforepush, push イベントが実行されます。');
		}}
	}]
});

QWERTY+JIS

他のキーボードを実装する場合、keyMode: に定義します。
上記の場合は、「QWERTY+JIS」キーボードです。
定義の種類は以下の通りです。

keyMode: String

• QWERTY

• QWERTY+JIS

• QWERTY+US

• TENKEY

• FULL

Source:

new Ext.FormPanel({
	labelWidth: 75,
	frame:true,
	title: 'QWERTY+JIS KeyPad sample',
	bodyStyle:'padding:5px 5px 0',
	width: 350,
	defaults: {width: 230},
	defaultType: 'textfield',
	renderTo: 'keypad2',

	items: [{
		fieldLabel: 'Keypad',
		name: "keypad",
		xtype: "keypadfield",
		keyMode: "QWERTY+JIS"
	}]
});

Custom

キーボードを自由に変えたい場合は、keys: に定義します。
複数の文字を指定する事もできます。
セパレータはカンマ(,)ですが、separator: 定義に設定すれば、変更可能です。
enableBS: を true に設定した場合、バックスペースキーのみ有効とします。
※最後に打ち込んだ文字のみ1文字削除します。

Source:

new Ext.FormPanel({
	labelWidth: 75,
	frame:true,
	title: 'Custom KeyPad sample',
	bodyStyle:'padding:5px 5px 0',
	width: 350,
	defaults: {width: 230},
	defaultType: 'textfield',
	renderTo: 'keypad3',

	items: [{
		fieldLabel: 'Keypad',
		name: "keypad",
		xtype: "keypadfield",
		separator: "#",
		enableBS: true,
		keys: [
			'p#l#a#s#m#a',
			's#p#h#e#r#e',
			'  #  #  #  #.#net'
		]
	}]
});

Support
使用につき、不明な点があればBBSにてご質問ください。
もしくは、ExtJSフォーラムの該当スレッドまでお願いします。
Ask to the pertinence thread of the ExtJS forum.

アーカイブに戻る