cmd 프로젝트 생성 폴더로 이동

sencha -sdk /path/of/my/sdk/extjs/ generate app myAppName /path/of/myApp


'Sencha' 카테고리의 다른 글

프로젝트 생성  (0) 2017.06.05
Sass & Compass 설치  (0) 2012.04.14
sencha touch codeset  (0) 2012.02.28
json  (0) 2012.02.21
jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16

sudo gem install haml

sudo gem install compass

'Sencha' 카테고리의 다른 글

프로젝트 생성  (0) 2017.06.05
Sass & Compass 설치  (0) 2012.04.14
sencha touch codeset  (0) 2012.02.28
json  (0) 2012.02.21
jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16
http://doworld.tistory.com/?page=7

'Sencha' 카테고리의 다른 글

프로젝트 생성  (0) 2017.06.05
Sass & Compass 설치  (0) 2012.04.14
sencha touch codeset  (0) 2012.02.28
json  (0) 2012.02.21
jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16

/*

 

 Step 01

  - 메인 패널 생성하기.

  Ext.Ajax.request()

  - url : 서버 URL

  - success: Ajax통신이 성공했을때

  - failure :  Ajax통신이 실패했을대

  - callback : 실패/성공과 상관없이 Ajax통신이 끝났을때.

 

  - method : HTTP Method (POST,GET을 주로 사용);

 

  - params, jsonData, xmlData

 

 

 - 먼저 검색방식은 크게 id, css selector로 나뉨

- id 파라메터를 가지고 검색하는 함수들

fly(), get()

- css selector로 

select(), query() 등등..


- 결과값역시 dom node, Ext element로 나눔.

  즉, 원하는게 dom node인지 Ext Element인지 판단 후 관련있는 메소드를 호출 하면 됨.

- 리턴값이 dom node인 경우

   query() . . .

- element인 경우

fly(), select() ...

 */

Ext.setup({

onReady: function() 

{

objPanel=new Ext.Panel({

    fullscreen:true,

    scroll: 'vertical',

    dockedItems:[{

    dock:"top",

    xtype:"toolbar",

    title:"ajax test",

    items:[{

    text:"load",

    handler:function(){    

    sendData();

    }

    }]

    }]

    });

}

});



function sendData()

{

objPanel.setLoading(true);

Ext.Ajax.request({

        url: 'menulist.json',

        

        method:"POST",

        success: function(response, opts) {     

            objPanel.update(response.responseText);

            

            // XML 파싱

            parseData(response.responseText);

            

        },

failure: function(response, opts) {

  console.log("failure ", response.status);

},

callback:function(opts,isSuccess,response){

console.log("callback ", opts, isSuccess, response);

objPanel.setLoading(false);

}

    });

}


//7. 데이터 처리.

function parseData(strInfo)

{

// js DOM 방식.

var objJSON  = eval("("+strInfo+")");

console.log(objJSON);

console.log("메뉴 개수는? ", objJSON.menu_list.length);

//sencha 방식.

var objJSON2 =Ext.util.JSON.decode(strInfo)

console.log("메뉴 개수는? ", objJSON2.menu_list.length);

}


------------------------------------ menulist.json -------------------------------------------

{"menu_list":[

{"id":"id_0","out":"images\/menu_1.png","over":"images\/menu_1over.png"},

{"id":"id_1","out":"images\/menu_2.png","over":"images\/menu_2over.png"},

{"id":"id_2","out":"images\/menu_3.png","over":"images\/menu_3over.png"},

{"id":"id_3","out":"images\/menu_4.png","over":"images\/menu_4over.png"},

{"id":"id_4","out":"images\/menu_5.png","over":"images\/menu_5over.png"},

{"id":"id_5","out":"images\/menu_6.png","over":"images\/menu_6over.png"},

{"id":"id_6","out":"images\/menu_7.png","over":"images\/menu_7over.png"},

{"id":"id_7","out":"images\/menu_8.png","over":"images\/menu_8over.png"},

{"id":"id_8","out":"images\/menu_9.png","over":"images\/menu_9over.png"},

{"id":"id_9","out":"images\/menu_10.png","over":"images\/menu_10over.png"}

],

"success":"true"}



 

'Sencha' 카테고리의 다른 글

Sass & Compass 설치  (0) 2012.04.14
sencha touch codeset  (0) 2012.02.28
json  (0) 2012.02.21
jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16
Ext.Component의 스타일 관련 프로퍼티, 메서드  (0) 2012.02.14

/*

 

 Step 01

  - 메인 패널 생성하기.

  Ext.Ajax.request()

  - url : 서버 URL

  - success: Ajax통신이 성공했을때

  - failure :  Ajax통신이 실패했을대

  - callback : 실패/성공과 상관없이 Ajax통신이 끝났을때.

 

  - method : HTTP Method (POST,GET을 주로 사용);

 

  - params, jsonData, xmlData

 

 */

Ext.setup({

onReady: function() 

{

objPanel=new Ext.Panel({

    fullscreen:true,

    scroll: 'vertical',

    dockedItems:[{

    dock:"top",

    xtype:"toolbar",

    title:"ajax test",

    items:[{ 

    text:"load",

    handler:function(){    

    sendData();

    }

    }]

    }]

    });

}

});




function sendData()

{

var objData = {"data1":"data__1", "data2":"data___2"};

objPanel.setLoading(true);

Ext.util.JSONP.request({

        url: 'http://www.google.com',

        params:objData,

        method:"GET",

        callbackKey:"callback",

      

failure: function(response, opts) {

  console.log("failure ", response.status);

},

callback:function(opts,isSuccess,response){

console.log("callback ", opts, isSuccess, response);

objPanel.setLoading(false);

            objPanel.update(opts);

            

            // CSV 파싱

            parseData(opts);

}

    });

}


//7. 데이터 처리.

function parseData(strText)

{

console.log("strText", strText);

}




-------------------------------------- server -----------------------------------------------

<?php


$data1 = $_GET["data1"];

$data2 =$_GET["data2"];

$callback = $_GET["callback"];

 

$strResult = "{";

$strResult .='"id":"'.$data1.'",';

$strResult .='"pw":"'.$data2.'"';

$strResult .="}";

$response = $callback."('".$strResult."')";

echo $response;

?>


 

'Sencha' 카테고리의 다른 글

sencha touch codeset  (0) 2012.02.28
json  (0) 2012.02.21
jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16
Ext.Component의 스타일 관련 프로퍼티, 메서드  (0) 2012.02.14
class  (0) 2012.02.14

-------------------- html ------------------------------

<div class="x-hidden-display" id="main_menu">

<ul>

<li data-panel="intro_panel">

<img src="../images/sushi_icons/Sushi01.png"><span>회사소개</span

>

</li>

<li data-panel="gallary_panel">

<img src="../images/sushi_icons/Sushi02.png"><span>갤러리</span

>

</li>

</ul>

</div>


-------------------- js ------------------------------
 

listeners:{

render:function(){

Ext.select("#main_menu ul li").addListener("click",function(){

var viewID = this.getAttribute("data-panel");

mainPanel.setActiveItem(viewID,{

type: 'slide',

direction: 'left',

duration: 300

});

});

}

}

'Sencha' 카테고리의 다른 글

json  (0) 2012.02.21
jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16
Ext.Component의 스타일 관련 프로퍼티, 메서드  (0) 2012.02.14
class  (0) 2012.02.14
위치및 크기  (0) 2012.02.14


style,

styleHtmlCls

styleHtmlContent

bodyStyle


스타일 메서드 

- 추가하기 : addCls()

- 삭제하기 : removeCls()  

'Sencha' 카테고리의 다른 글

jsonp  (0) 2012.02.21
이미지에 클릭이벤트 등록  (0) 2012.02.16
Ext.Component의 스타일 관련 프로퍼티, 메서드  (0) 2012.02.14
class  (0) 2012.02.14
위치및 크기  (0) 2012.02.14
Panel refresh  (0) 2012.02.14

baseCls : 

- 컴포넌트의 기본 클래스

- 기본 baseCls 패널인 경우 x-panel, body는 x-panel-body

- 예) baseCls:test인 경우, test, body는 test-body

 

componentCls

- 컴포넌트에 스타일 추가할때

 

cls

- 컴포넌트 스타일을 커스터마이징 할때

'Sencha' 카테고리의 다른 글

이미지에 클릭이벤트 등록  (0) 2012.02.16
Ext.Component의 스타일 관련 프로퍼티, 메서드  (0) 2012.02.14
class  (0) 2012.02.14
위치및 크기  (0) 2012.02.14
Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14

위치및 크기 변경.

- 크기 변경 : seWidth(), setHeight(), setSize()

- 위치 변경 : setPosition();

위치및 크기 얻기

- 크기 값 : getWidth(), getHeight(), getSize()

- 위치 값 : 기본적으로 제공하지 않음, 이를 위해서는 Element 기능을 사용해야 함.

'Sencha' 카테고리의 다른 글

Ext.Component의 스타일 관련 프로퍼티, 메서드  (0) 2012.02.14
class  (0) 2012.02.14
위치및 크기  (0) 2012.02.14
Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14

panel.doLayout();  

'Sencha' 카테고리의 다른 글

class  (0) 2012.02.14
위치및 크기  (0) 2012.02.14
Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14
자신의 부모호출 ownerCt  (0) 2012.02.14


// 자식컴포넌트 전체 갯수.

panel.items.getCount()

panel.items.length

// each를 이용해서 모든 자식노드 접근하기.

panel.items.each(function(item, index, length){

console.log(" index =",index+", id="+item.id);

});

//  첫번째

panel.items.first().id

// 마지막번째

panel.items.last().id

// N번째

panel.items.getAt(1).id

panel.items.items[1].id

'Sencha' 카테고리의 다른 글

위치및 크기  (0) 2012.02.14
Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14
자신의 부모호출 ownerCt  (0) 2012.02.14
나만의 버튼 등록  (0) 2012.02.14


해당 container에서만, panel.items.map[strQueryID]

전체에서, Ext.getCmp(strQueryID)

해당 container에서만, panel.child("#"+strQueryID)

해당 container에서만, panel.getComponent(strQueryID)

'Sencha' 카테고리의 다른 글

Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14
자신의 부모호출 ownerCt  (0) 2012.02.14
나만의 버튼 등록  (0) 2012.02.14
폰에서 브라우저 metatag  (0) 2012.02.07

handler:function(target){

target.ownerCt.remove(target);

}

'Sencha' 카테고리의 다른 글

Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14
자신의 부모호출 ownerCt  (0) 2012.02.14
나만의 버튼 등록  (0) 2012.02.14
폰에서 브라우저 metatag  (0) 2012.02.07

var DButton = Ext.extend(Ext.Button,{

text:"button"

});

var dButton = new DButton();

Ext.reg("dButton",DButton);

'Sencha' 카테고리의 다른 글

Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14
자신의 부모호출 ownerCt  (0) 2012.02.14
나만의 버튼 등록  (0) 2012.02.14
폰에서 브라우저 metatag  (0) 2012.02.07
아이폰 viewport 크기

iPhone 사파리 브라우저의 기본 viewport의 크기는 980px * 1470px입니다.
즉, 화면을  이크기로 렌더링 한다. 
이렇게 렌더링된 화면을 아이폰화면의 크기(320px*480px) 에 맞게 보여주기 위해서 축소하게 된다.


homescreen-icon
<!--광택 + 둥근모서리로 만들어준답니다. -->
<link rel="apple-touch-icon" href="screenicon.png" />

<!-- 광택효과 없이 사용자가 미리만들어논(precomposed) 아이콘을 사용하고 싶을때 -->
<link rel="apple-touch-icon-precomposed" href="screenicon_precom.png" />


full-screen
<meta name="apple-mobile-web-app-capable" content="yes" />

statusbar 색상
<meta name="apple-mobile-web-app-capable" content="yes" />

'Sencha' 카테고리의 다른 글

Panel refresh  (0) 2012.02.14
자식노드 접근하기.  (0) 2012.02.14
자식객체로 추가된 특정 컴포넌트 찾기.  (0) 2012.02.14
자신의 부모호출 ownerCt  (0) 2012.02.14
나만의 버튼 등록  (0) 2012.02.14
폰에서 브라우저 metatag  (0) 2012.02.07

+ Recent posts