Ext JS - 7. Simple container layout 생성
Web Programming/Ext JS / 2010. 1. 21. 11:42
<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이 생성된다.
주석 참고!
window의 mask를 true로 했으므로 window가 닫히기 전까지는 다른 element를 선택 불가.
상단 바의 'Add child' 버튼을 누르면 새로운 자식 panel이 생성된다.
주석 참고!
'Web Programming > Ext JS' 카테고리의 다른 글
| [Error] Error with simple grid app: this.config[a] is undefined (0) | 2011.07.13 |
|---|---|
| Ext JS - 8. List of component xtype. (0) | 2010.01.21 |
| Ext JS - 6. Form 생성 (0) | 2010.01.21 |
| Ext JS - 5. applyTo, renderTo, contentEl 의 차이점 (0) | 2010.01.14 |
| Ext JS - 4. Events 등록과 Event Listeners (0) | 2010.01.14 |