Dev/ExtJS
[ExtJS] UP , DOWN / 자식 요소 , 부모 요소 찾기
by 코딩삐약
2024. 3. 22.
<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>
