Ext JS - 6. Form 생성
<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<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" src="formLayout.js">
var myWin = new Ext.Window({ // window 생성
width : 200, // width 200
bodyStyle : 'padding: 5px', // window style 지정 : padding 5px
layout : 'form', // layout 은 form 형태
labelWidth : 50, // 각각의 필드에 사용될 라벨의 width 50
defaultType : 'field', // default type 은 field 로 지정
items : [ // window 내부에 들어가는 item 지정
{
fieldLabel : 'Name', // 첫 번째로 Name이라는 fieldLabel을 가진 field 생성
anchor : '-4'
},
{
fieldLabel : 'Age', // 두 번째로 Age라는 fieldLabel을 가진 field 생성
width : 25
},
{
xtype : 'combo', // 세 번째로 combobox 생성(html의 select)
fieldLabel : 'Location', // combobox의 fieldLabel을 Location으로 지정
anchor : '-4', // anchor는 100%에서 -4px
store : ['Here', 'There', 'Anywhere'] // combobox의 option
},
{
xtype : 'textarea', // 네 번째로 textarea 생성
fieldLabel : 'Bio', // fieldLabel
anchor : '-4, -134' // anchor 지정
},
{
xtype : 'panel', // panel type의 field 생성
fieldLabel : '',
labelSeparator : '',
frame : true,
title : 'Instructions',
html : 'Please fill in the form', // panel 안에 들어갈 html 형식의 text
anchor : '-4'
}
]
});
myWin.show();
</script>
</body>
</html>
주석만 보아도 다 알만한 내용들.
'Web Programming > Ext JS' 카테고리의 다른 글
| Ext JS - 8. List of component xtype. (0) | 2010.01.21 |
|---|---|
| Ext JS - 7. Simple container layout 생성 (0) | 2010.01.21 |
| Ext JS - 5. applyTo, renderTo, contentEl 의 차이점 (0) | 2010.01.14 |
| Ext JS - 4. Events 등록과 Event Listeners (0) | 2010.01.14 |
| Ext JS - 3. Burst Events in action (0) | 2010.01.14 |