2007年9月3日月曜日

ExtでDraggable&Resizableなdiv要素

とりあえずGoogleカレンダー的なものをExt使って作りたいのです。そのうちExtに用意されたりして。

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample - Drag & Resize</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(){
var elmt = document.createElement('div');
elmt.id = 0;
elmt.className='increment';
document.body.appendChild(elmt);

new Ext.Resizable(elmt.id, {
handles: 's',
heightIncrement:50,
minHeight: 50,
pinned:true
});

new Ext.dd.DragSource(elmt.id);

});
//--></script>
<style type="text/css">
.increment {
border:1px solid #c3daf9;
width:100;
height:200;
}
</style>
</head>
<body>
</body>
</html>

生成した要素でDragSourceを利用する場合はappendChild後じゃないと動作しないみたい。要素を取得できないのかな?先に試したResizableがappendChild前でOKだったので結構はまった。

0 件のコメント: