<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <!-- 1 -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <!-- 2 -->
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
</script>
</head>
<body>
<script type="text/javascript">
var childPnl1 = { // childPnl1 이라는 panel 생성
frame : true,
height : 50,
html : 'This is first child panel',
title : 'First child panel'
};
var childPnl2 = { // childPnl2 라는 panel 생성
width : 150,
html : 'Here is second child',
title : 'Thanks god it's friday'
};
var myWin = new Ext.Window({ // childPnl1과 childPnl2를 나타낼 window 생성
height : 300,
width : 300,
modal : true, // mask 씌우기 true (window가 나타나면 다른 영역은 선택이 불가능)
title : 'A window with a container layout',
autoScroll : true, // autoscroll 활성화
items : [ // window에 들어갈 item
childPnl1,
childPnl2
],
tbar : [ // top bar의 내용 (bottom bar 는 bbar)
{
text : 'Add child',
handler : function() { // handler 를 걸어 버튼으로 작동 가능 (클릭시 panel을 child로 생성)
var numItems = myWin.items.getCount() + 1; // window의 item의 갯수 + 1을 식별 번호로...
myWin.add({ // window에 panel add
title : 'Another child ' + numItems, // child panel의 title
height : 60,
frame : true,
collapsible : true, // flip 가능
collapsed : true, // 기본으로 접혀 있음
html : 'Congratuations!!! you maid another child!' // panel의 내용
});
myWin.doLayout(); // child panel을 생성한 이후에는 반드시 window에 그려주는 작업을!!
}
}
]
});
myWin.show();
</script>
</body>
</html>
-->
기본적으로 페이지가 로딩되면 window 안에 두 개의 패널이 포함되어 있다.
window의 mask를 true로 했으므로 window가 닫히기 전까지는 다른 element를 선택 불가.
상단 바의 'Add child' 버튼을 누르면 새로운 자식 panel이 생성된다.
주석 참고!
