HTML5 Sencha 강좌 #4 (20120329)

2012. 3. 29. 14:25ㆍ99. 정리전 - IT/11. Java

 

 

SENCHA 

 

- Panel 공부 -

 

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
    <link rel="stylesheet" href="./libs/resources/css/sencha-touch.css">
 <script src="./libs/sencha-touch.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/doc.js"></script>
    <script src="./js/panel.js"></script>
 <script>
  // 센챠 초기화
  Ext.setup({
   // main함수
   onReady : function() {
    var mainPanel = new Ext.TabPanel({
     id         : 'mainPanel',      // 개발자가 지정하는 식별자, 모든 component에 지정가능
     fullscreen : true,
     items      : [docked, panels], // TabPanel을 사용했기 때문에 layout은 기본 card layout임
     tabBar     : {                 // TabPanel은 card layout + toolbar
      scroll : 'horizontal',     // toolbar 버튼이 많아서 스크롤 되어 한다면
      dock   : 'bottom',
      layout : {
       pack : 'center'
      }
     },
     listeners  : {                 // event 처리
      cardswitch : myHandler     // myHandler 펑션 호출
     }
    });
   }
  });
 </script>
</head>
<body>

</body>
</html>

 

index.js

var myHandler = function(container, newCard, oldCard, index) {
 alert("[" + container.id + "/" + newCard.id + "/" + oldCard.id + "/" + index + "]");
}

 

doc.js

var docked = new Ext.Panel({
 fullscreen  : true,
 title       : 'dock',  // 해당 panel이 mainPanel의 item으로 들어가는데 mainPanel이
         // TabPanel이다. 자동 화면과 버튼이 생김, 버튼의 문자열
 iconCls     : 'info',  // 버튼의 iconcss class 명
 badgeText   : '1',   // 버튼위에 들어가는 그림모양의 문자(SMS 아이콘의 문자 카운트건수 표시 같은거)
 id          : 'docked',
 html        : 'Docked Test', // html로 화면구성하거나 items로 component 추가하거나
 dockedItems : [{
  dock    : 'top',
  style   : 'background : #ffff00',
  html    : "<center>Dock-Top</center>"
 },{
     dock    : 'left',
     style   : 'background : #0000ff',
  html    : "<center>Dock-Left</center>"
 }]
});

 

panel.js

var panels, panela, panelb, panel1, panel2, panel3;

panela1 = new Ext.Panel({
 bodyStyle  : 'background : #ffffff'
});
panela2 = new Ext.Panel({
 bodyStyle  : 'background : #ffff00'
});
panela3 = new Ext.Panel({
 bodyStyle  : 'background : #ff00ff'
});

panela = new Ext.Panel({
 layout     : {   // items의 정렬규칙
  type   : 'hbox', // 가로방향 나열
  align  : 'stretch'
 },
 defaults   : {   // items 마다 공통사항 정의
  flex   : 1   // 확장비율
 },
 items      : [panela1, panela2, panela3]
});

panelb = new Ext.Panel({
 bodyStyle  : 'background : #00ffff'
});

panels = new Ext.Panel({
 fullscreen : true,
 title      : 'panel', // mainPanel에 붙힐거임, 버튼의 문자열
 iconCls    : 'favorites',
 badgeText  : '2',
 id         : 'panel',
 layout     : {
  type   : 'vbox',
  align  : 'stretch'
 },
 defaults   : {
  flex   : 1
 },
 items      : [panela, panelb]
});

 

결과

      

 

 

 

# ajax 통신

 

doc.js

var docked = new Ext.Panel({
 fullscreen  : true,
 title       : 'dock',  // 해당 panel이 mainPanel의 item으로 들어가는데 mainPanel이
         // TabPanel이다. 자동 화면과 버튼이 생김, 버튼의 문자열
 iconCls     : 'info',  // 버튼의 iconcss class 명
 badgeText   : '1',   // 버튼위에 들어가는 그림모양의 문자(SMS 아이콘의 문자 카운트건수 표시 같은거)
 id          : 'docked',
 html        : 'Docked Test', // html로 화면구성하거나 items로 component 추가하거나
 dockedItems : [{
  dock    : 'top',
  style   : 'background : #ffff00',
  html    : "<center>Dock-Top</center>"
 },{
     dock    : 'left',
     style   : 'background : #0000ff',
  html    : "<center>Dock-Left</center>"
 }]
});

 

index.js

var myHandler = function(container, newCard, oldCard, index) {
 alert("[" + container.id + "/" + newCard.id + "/" + oldCard.id + "/" + index + "]");
 
 if (index == 2) {
  // 외부 파일 ajax 연동
  Ext.Ajax.request({
   url     : 'some.html',
   success : function(response, opts) {
    Ext.getCmp('html1').getActiveItem().update(response.responseText);
   }
  });
 } else if (index == 4) {
  // 서버 연동 시작하면서 화면에 mask(화면 block)를 띄운다
  Ext.getBody().mask("Loading...","loading 중입니다.", false);
  // 화면을 구성할 templete 객체를 초기화 ***********************
  var tpl = Ext.XTemplate.from('userInfo'); // userInfo라는 문자열을 갖는 템플릿을 사용하겠다 (index.html에서 사용할 것임)
  Ext.util.JSONP.request({
   url         : 'some.jsp',
   callbackKey : 'callback',
   params      : {       // 전송할 데이터
    userId  : 'kkang'
   },
   callback    : function(result) {  // 결과처리
    if (result != "") {
     var html = tpl.applyTemplate(result);
     Ext.getCmp("html3").getActiveItem().update(html);
    }
    Ext.getBody().unmask();
   }
  })
 }
}

 

html.js

// 외부  html 파일 연동
var html1 = new Ext.Panel({
 id         : 'html1',
 fullscreen : true,
 title      : 'html1',
 iconCls    : 'info',
 layout     : {
  type   : 'card',
  pack   : 'center'
 },
 items      : [{
  html   : ' '
 }]
});

// body 영역의 html을 id로 지칭하여 사용
var html2 = new Ext.Panel({
 id         : 'html2',
 fullscreen : true,
 title      : 'html2',
 iconCls    : 'info',
 layout     : {
  type   : 'card',
  pack   : 'center'
 },
 items      : [{
  contentEl : 'someId' // El : element 의 약자, some.html의 내용중 div의 id값
 }]
});

// server 연동으로 json 데이터 획득해서 template에 적용하는 방법
var html3 = new Ext.Panel({
 id         : 'html3',
 fullscreen : true,
 title      : 'html3',
 iconCls    : 'info',
 layout     : {
  type   : 'card',
  pack   : 'center'
 },
 items      : [{
  html   : ' '
 }]
});

 

panel.js

var panels, panela, panelb, panel1, panel2, panel3;

panela1 = new Ext.Panel({
 bodyStyle  : 'background : #ffffff'
});
panela2 = new Ext.Panel({
 bodyStyle  : 'background : #ffff00'
});
panela3 = new Ext.Panel({
 bodyStyle  : 'background : #ff00ff'
});

panela = new Ext.Panel({
 layout     : {   // items의 정렬규칙
  type   : 'hbox', // 가로방향 나열
  align  : 'stretch'
 },
 defaults   : {   // items 마다 공통사항 정의
  flex   : 1   // 확장비율
 },
 items      : [panela1, panela2, panela3]
});

panelb = new Ext.Panel({
 bodyStyle  : 'background : #00ffff'
});

panels = new Ext.Panel({
 fullscreen : true,
 title      : 'panel', // mainPanel에 붙힐거임, 버튼의 문자열
 iconCls    : 'favorites',
 badgeText  : '2',
 id         : 'panel',
 layout     : {
  type   : 'vbox',
  align  : 'stretch'
 },
 defaults   : {
  flex   : 1
 },
 items      : [panela, panelb]
});

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
    <link rel="stylesheet" href="./libs/resources/css/sencha-touch.css">
 <script src="./libs/sencha-touch.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/doc.js"></script>
    <script src="./js/panel.js"></script>

    <script src="./js/html.js"></script>
 <script>
  // 센챠 초기화
  Ext.setup({
   // main함수
   onReady : function() {
    var mainPanel = new Ext.TabPanel({
     id         : 'mainPanel',      // 개발자가 지정하는 식별자, 모든 component에 지정가능
     fullscreen : true,
     items      : [docked, panels, html1, html2, html3], // TabPanel을 사용했기 때문에 layout은 기본 card layout임
     tabBar     : {                 // TabPanel은 card layout + toolbar
      scroll : 'horizontal',     // toolbar 버튼이 많아서 스크롤 되어 한다면
      dock   : 'bottom',
      layout : {
       pack : 'center'
      }
     },
     listeners  : {                 // event 처리
      cardswitch : myHandler     // myHandler 펑션 호출
     }
    });
   }
  });
 </script>
</head>
<body>
    <div id="someId" class="x-hidden-display">
        someId 의 내용임
    </div>
 <!-- 이하의 template 객체의 설정은 막 꽁짜로 쓰는것이 아님, index.js에 template을 사용할 수 있게 정의해야함 -->
    <div id="userInfo" class="x-hidden-display">
        <tpl for="."><!-- 화면에 찍어줘야 할 문자열 -->
         ID    : {userId}<br/>
   Phone : {phone} <br/>
        </tpl>
    </div>
</body>
</html>

 

some.html

<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
    <sciprt>
     window.onload = function() {
         alert('some.html');
  }
    </sciprt>
</head>
<body>
    some.html 파일입니다(외부연동용)
</body>
</html>

 

some.jsp

Ext.util.JSONP.callback([
{"userId" : "${param.userId}","phone":"010000"},
{"userId" : "${param.userId}","phone":"012345"}
])

 

결과

 

 

 

 

# proxy 이용한 데이터 통신

첨부파일 참조

 

 

소스

CH8-Sencha.zip

 

결과

 


저작자표시

관련글

티스토리툴바