<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Extjs4</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<!-- <script type="text/javascript" src="ext-all.js"></script> -->
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.application({
name : 'BasicFormExt' ,
launch : function(){
var textName = Ext.create('Ext.form.TextField' , {
id : 'text_name' ,
name : 'name' ,
fieldLabel : '이름' ,
value : '감자' ,
allowBlank : false // true : 빈칸 허용 / false : 빈칸 x
});
var nickName = Ext.create('Ext.form.TextField' , {
id : 'text_nick_name' ,
name : 'nick_name' ,
fieldLabel : '닉네임' ,
value : '' ,
allowBlank : false // true : 빈칸 허용 / false : 빈칸 x
});
var mainPanel = Ext.create('Ext.form.Panel' , {
title : 'Personal Info' ,
width : 300 ,
bodyPadding : 10 ,
renderTo : Ext.getBody() ,
items : [
textName
, nickName
] ,
buttons : [
{
text : 'Save'
, handler : function(){
var valid = Ext.ComponentQuery.query('form > textfield{ isValid() }');
alert( valid[0].fieldLabel ) ;
console.log( 'saved' ) ;
}
}
]
});
// 요소 찾기
/////////////////////////////////////////////////////////////////////////////
// 가장 첫번째 일치하는 자식 요소를 찾기
/////////////////////////////////////////////////////////////////////////////
var firstChildText = mainPanel.down('textfield');
console.log( "[firstChildText.id] " + firstChildText.id ) ;
// 결과 : text_name
/////////////////////////////////////////////////////////////////////////////
// 부모 요소 찾기
/////////////////////////////////////////////////////////////////////////////
var myText = Ext.ComponentQuery.query('textfield');
console.log( "[myText[2].up('panel').title] " + myText[2].up('panel').title ) ;
// 결과 : Personal Info
/////////////////////////////////////////////////////////////////////////////
// 마지막 요소 찾기
/////////////////////////////////////////////////////////////////////////////
var lastText = Ext.ComponentQuery.query('form textfield:last');
console.log( "[lastText[0].id] " + lastText[0].id ) ;
// 결과 : text_nick_name
}
});
</script>
</head>
<body>
</body>
</html>
'프로그래밍 > EXTJS4' 카테고리의 다른 글
| EXTJS4 - CUSTOM TEXT 만들기 ( 내가 원하는 TEXT 만들기 ) (0) | 2019.12.06 |
|---|---|
| ExtJS4 - Custom Panel 만들기 ( 내가 원하는 Panel 만들기 ) (0) | 2019.12.06 |
| EXTJS4 - ID / 속성값 으로 검색하여 form 찾기 (0) | 2019.12.04 |
| EXTJS4 - 클래스 믹스인(mixins) (0) | 2019.12.01 |
| EXTJS4 - 클래스 상속하기 (0) | 2019.12.01 |
나무뚱이