센차 터치 2.0 , sencha touch 2.0.1.1 senchaexamples.com의 Ext.Button.badgeText
이 번 시간은 버튼에서 제공 하는 것 중 하나인 badge의 사용법을 알아 보는 시간이다.
사용법은 다음과 같다.
badgeText : '값', -> 이곳에 표시 하고자 하는 내용을 입력 하면 된다.
다음 이미지는 버튼을 클릭 시 마다 카운트를 증가 시켜 그 내용을 badge에 표시 하는 실습 화면이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link href="../../frameworks/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<title>Setting badge text on an Ext.Button component using Sencha Touch 2</title>
</head>
<body>
<script src="../../frameworks/sencha-touch-all.js" type="text/javascript"></script>
<script type="text/javascript">
/*
sencha touch 2.0.1.1-commercial
*/
Ext.application({
launch: function () {
var clickCount = 0;
Ext.create('Ext.Container', {
fullscreen : true,
styleHtmlContent : true,
items : [
{
xtype : 'button',
text : 'badgeText',
badgeText : '0',
width : 150,
handler : function () {
this.setBadgeText(++clickCount);
}
}
]
});
}
});
</script>
</body>
</html>
원본 출처 : http://senchaexamples.com/