SeekU

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

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

sudo gem install haml

sudo gem install compass

/*

 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"}

/*

 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;

?>

-------------------- 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 ------------------------------
 

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

});

});

}

}

style,

styleHtmlCls

styleHtmlContent

bodyStyle

스타일 메서드 

- 추가하기 : addCls()

baseCls : 

- 컴포넌트의 기본 클래스

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

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

componentCls

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

cls

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

위치및 크기 변경.

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

- 위치 변경 : setPosition();

위치및 크기 얻기

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

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

panel.doLayout();  

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

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

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

전체에서, Ext.getCmp(strQueryID)

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

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

handler:function(target){

target.ownerCt.remove(target);

}

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

text:"button"

});

var dButton = new DButton();

Ext.reg("dButton",DButton);