– 출처: 센차터치2+폰갭 프로그래밍 – * 코드 Ext.application({ requires: [‘Ext.Panel’], launch: function(){ var panel = new Ext.create(‘Ext.Panel’, { fullscreen: true, layout: { type: ‘vbox’, //세로로 배열하는 레이아웃 align: ‘stretch’ //꽉 차게 늘여서 맞춘다 }, items: [ { flex: 1, //flex 값은, 같은 위상의 컴포넌트들끼리 화면을 점유하는 상대적인 비율을 의미하는 값이다. style: ‘background-color:red; font-size:… Read More »
컨테이너의 items 배열에 docked 속성(top, bottom…)이 들어 있는 패널을 정의하면 된다.
– 출처: 센차터치2+폰갭 프로그래밍 – * 어플리케이션 파일 (app.js) Ext.application({ name: ‘HelloSenchaTouch’, requires: [], //아래와 같이 view 항목에 클래스명만 넣을 경우, app.view 패키지에 HelloView.js 파일이 들어있다는 전제가 요구됨. //별도의 패키지에 파일이 존재할 경우 FQN(Full Qualified Name)을 넣어야 함. views: [‘HelloView’], launch: function(){ Ext.Viewport.add(Ext.create(‘HelloSenchaTouch.view.HelloView’)); } }); * 뷰(view) 파일 (app/view/HelloView.js) Ext.define(‘HelloSenchaTouch.view.HelloView’, { extend: ‘Ext.Panel’,… Read More »
– 출처: 센차터치2+폰갭 프로그래밍 – * Container의 items속성을 사용하여 Component를 삽입 Ext.application({ name: ‘Sencha’, requires: [‘Ext.Panel’], launch: function(){ Ext.create(‘Ext.Panel’, { fullscreen: true, html: [‘I am Container’].join(” “), items: [{ //컴포넌트 삽입 xtype: ‘panel’, style: ‘background-color:white’, html: [‘I am Component<br> I am added’].join(‘ ‘) }] }); } }); * Component를 별도로 생성 후 Container에… Read More »
– 출처: 센차터치2+폰갭 프로그래밍 – ※ 예제 파일 경로 /index.html => base 문서/js/app.js => 센차 어플리케이션 js 파일 (index.html에서 로딩)/js/package1/sub1.js => 로딩할 모듈 app.js //네임스페이스 지정 Ext.ns(‘main’); Ext.application({ name: ‘Path’, //실험 결과, requires의 기준경로는 application을 로딩한 html파일이 있는 곳이다. requires: [ ‘Ext.Panel’, ‘Ext.Toolbar’, ‘js.package1.sub1’ //사용자정의 모듈 로딩 ], launch: function(){ main.panel = new… Read More »
– 출처: 센차터치2+폰갭 프로그래밍 – Ext.application({ name: ‘EventExtend’, requires: [‘Ext.Panel’, ‘Ext.Button’], launch: function(){ //Ext.Button을 상속한 userButton 클래스 정의 Ext.define(‘userButton’, { extend: ‘Ext.Button’, config: { //config에 지정된 속성은 getter, setter가 자동생성된다. width: 200, height: 200, text: ‘가운데로’, listeners: { tap: function(){ this.fireEvent(“pupu”); //사용자정의 이벤트 pupu를 트리거 함. } } } }); var panel = Ext.create(‘Ext.Panel’,… Read More »
