コンボボックスのサンプルを試してみた。いくつか種類があって、今回は既存のリストボックスをコンボボックスに変換するタイプのものを選択。既存リストボックスのid属性を指定してあげればよいだけ。直接入力できて選択要素をフィルタリング＆補完してくれる。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample - ComboBox</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.form.ComboBox({
// 対象のリストボックスのidを設定する
transform:'comboId',
// 必ず要素を選択させる
forceSelection:true,
// 候補となる要素文字列を補完する
typeAhead: true,
// 一文字ごとにチェックする
triggerAction: 'all',
// サイズを設定する
width:135
});
});
//--></script>
</head>
<body>
<form action="">
<select name="combo" id="comboId">
<option value="0001">0001</option>
<option value="0011">0011</option>
<option value="0111">0111</option>
<option value="1111">1111</option>
</select>
</form>
</body>
</html>
0 件のコメント:
コメントを投稿