기존
1. fieldLabe에 정의된 내용 출력
2. 입력 박스 출력
변경
1. 추가적으로 html요소를 추가하여 화면에 출력하기
<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">
Ext.onReady(function(){
Ext.define('Training.TextField' , {
override : 'Ext.form.field.Text' ,
onRender : function(){
this.callParent( arguments ) ;
// 추가적으로 삽입할 html 요소
// infoText는 item입력시 값을 기준으로 한다.
var customizedHtml = '<div>' + this.infoText + '</div>';
Ext.core.DomHelper.append( this.el , customizedHtml ) ;
}
});
Ext.application({
launch : function() {
var textfieldItemName = {
fieldLabel : 'Name'
, name : '_name'
, allowBlank : false
, infoText : 'Enter your name'
}
var textfieldItemId = {
fieldLabel : 'ID'
, name : '_id'
, allowBlank : false
, infoText : 'Enter your ID'
}
Ext.create('Ext.container.Viewport' , {
layout : 'anchor'
, items : [{
xtype : 'form'
, defaultType : 'textfield'
, items : [
textfieldItemName
, textfieldItemId
]
}]
}); // Ext.create
}//: launch
});
});
</script>
</head>
<body>
</body>
</html>
결과
1. 삽입한 html결과가 추가적으로 출력
'프로그래밍 > EXTJS4' 카테고리의 다른 글
| ExtJS4 - setStyle / html요소 (dom) style 변경하기 (0) | 2019.12.06 |
|---|---|
| ExtJS4 - html 요소(dom) 선택하기 / get, query, select (0) | 2019.12.06 |
| ExtJS4 - class override 하기 (0) | 2019.12.06 |
| EXTJS4 - CUSTOM TEXT 만들기 ( 내가 원하는 TEXT 만들기 ) (0) | 2019.12.06 |
| ExtJS4 - Custom Panel 만들기 ( 내가 원하는 Panel 만들기 ) (0) | 2019.12.06 |
나무뚱이