SeekU

1. var prop, obj = { name: "Joe", job: "Coder", age: 25 };  
2.   
3. for (var prop in obj) {  
4.   console.log(prop + ": " + obj[prop]);  
5. }  

/*

 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;

?>

width:100%;

text-overflow: ellipsis;

overflow:hidden;

text-align:center;

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>css3</title>

<!--

HTML 수정없이

1 2 3 4 위치를 2 1 4 3 으로 출력되게 하고 싶을때

-->

<style type="text/css">

body{

font-size:60px;

}

#container 

{  

width: 100%;  

display:-webkit-box;

-webkit-box-orient:horizontal;

}  

#box1   

{  

width:200px;  

background:#ff0000;  

min-height:100px;

-webkit-box-ordinal-group:2; 

}  

#box2 

{  

width:200px;  

background:#999;  

min-height:100px;

-webkit-box-ordinal-group:1;

}  

#box3 

{  

width:150px;  

background:#000000;  

min-height:100px; 

color:#ffffff; 

-webkit-box-ordinal-group:4;

} 

#box4 

{  

width:150px;  

background:#0000ff;  

min-height:100px; 

color:#ffffff; 

-webkit-box-ordinal-group:3;

}

</style>

</head>

<body>

<div id="container">

        <div id="box1">

       1

        </div>

        <div id="box2">

        2

        </div>

        <div id="box3">

        3

        </div>

        <div id="box4">

        4

        </div>

    </div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>css3</title>

<!--

- 세로로 출력하기 단, 역방향으로 출력하기.

-->

<style type="text/css">

body{

font-size:60px;

}

#container 

{  

width: 100%;  

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-box-direction:reverse;

}  

#box1   

{  

width:200px;  

background:#ff0000;  

min-height:100px;

}  

#box2 

{  

width:200px;  

background:#999;  

min-height:100px;  

}  

#box3 

{  

width:150px;  

background:#000000;  

min-height:100px; 

color:#ffffff; 

} 

#box4 

{  

width:150px;  

background:#0000ff;  

min-height:100px; 

color:#ffffff; 

}

</style>

</head>

<body>

<div id="container">

        <div id="box1">

       1

        </div>

        <div id="box2">

        2

        </div>

        <div id="box3">

        3

        </div>

        <div id="box4">

        4

        </div>

    </div>

</body>

</html>

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

var 키워드와 영역(scope)

• 함수 내에서 var 키워드로 변수를 선언하면 함수내 영역에 종속된다.
• 함수 내에서 var 키워드 없이 변수를 선언하면 전역 영역에 종속된다.
• 함수 밖 전역 영역에서는 var 키워드 사용 유무에 관계 없이 무조건 전역 영역에 종속된다.
• undefined : 변수를 선언해 놓고서, 값을 지정하지 않은 상태

make 유틸리티는 컴파일 명령어 처리를 쉽게 해줌

>configure
Makefile(컴파일 옵션이 설정되는 화일)이 만들어 짐.
소스를 컴파일하는 컴퓨터의 사양에 맞는 환경에 알맞는 Makefile 이 생성

>make
소스코드를 실제로 컴파일해서 binary 파일을 생성

> make install
만들어진 binary 파일을 지정된 디렉토리로 이동 

JSON.stringify(value null , '\n');