ダイアログのサンプルをいじってみた。<div class="x-dlg-hd">と<div class="x-dlg-bd">がそれぞれダイアログのタイトルと中身になる。中身は普通にフォーム要素を書いておけばOK。Ext.formを利用すればコンボボックスや日付入力フィールドなどをダイアログに表示できる。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample - Date</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"><!--
var DialogSample = function() {
var dialog, showBtn;
return {
init : function() {
// 日付入力フィールドを用意する
new Ext.form.DateField({
format:'Y/m/d',
value: new Date().format('Y/m/d'),
allowBlank:false
}).applyTo('dateId');
// idがbuttonIdのonclickアクションを設定する
showBtn = Ext.get('buttonId');
showBtn.on('click', this.show, this);
},
show : function() {
// 一回だけ初期化する。
if(!dialog){
dialog = new Ext.BasicDialog("dialogId", {
width:200,
height:100,
shadow:true,
minWidth:200,
minHeight:100,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog)
.disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();
Ext.onReady(DialogSample.init, DialogSample, true);
//--></script>
</head>
<body>
<div id='dialogId' style="visibility:hidden;position:absolute;">
<div class="x-dlg-hd">Title</div>
<div class="x-dlg-bd">
<input type="text" size="20" name="dateId" id="dateId" />
</div>
</div>
<button id='buttonId'>show</button>
</body>
</html>
0 件のコメント:
コメントを投稿