Sencha Touch2012. 8. 27. 15:42

센차 터치 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/

Posted by yaioyaio