블로그 이미지
Xeon의 세상 Xeoness

카테고리

Xeon World (23)
Diary (1)
Tuning (0)
Project (0)
Scrap (0)
Media (0)
L ♡ L (0)
일상생활 (4)
Web Programming (14)
IT 강국? 노가다 강국 (4)
Linux (0)
아리아리 동동~ (0)
Total
Today
Yesterday

달력

« » 2024.4
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

공지사항

최근에 올라온 글

Ext JS - 6. Form 생성

Web Programming/Ext JS / 2010. 1. 21. 11:14


<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript"> // 3
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
</script>
</head>
<body>
<script type="text/javascript" src="formLayout.js">
    var myWin = new Ext.Window({             // window 생성
        width       : 200,                              // width 200
        bodyStyle   : 'padding: 5px',            // window style 지정 : padding 5px
        layout      : 'form',                          // layout 은 form 형태
        labelWidth  : 50,                            // 각각의 필드에 사용될 라벨의 width 50
        defaultType : 'field',                      // default type 은 field 로 지정
        items       : [                                // window 내부에 들어가는 item 지정
                       {
                           fieldLabel   : 'Name', // 첫 번째로 Name이라는 fieldLabel을 가진 field 생성
                           anchor       : '-4'
                       },
                       {
                           fieldLabel   : 'Age', // 두 번째로 Age라는 fieldLabel을 가진 field 생성
                           width        : 25
                       },
                       {
                           xtype        : 'combo', // 세 번째로 combobox 생성(html의 select)
                           fieldLabel   : 'Location', // combobox의 fieldLabel을 Location으로 지정
                           anchor       : '-4',  // anchor는 100%에서 -4px 
                           store        : ['Here', 'There', 'Anywhere'] // combobox의 option
                       },
                       {
                           xtype        : 'textarea', // 네 번째로 textarea 생성
                           fieldLabel   : 'Bio',      // fieldLabel
                           anchor       : '-4, -134' // anchor 지정
                       },
                       {
                           xtype        : 'panel',    // panel type의 field 생성
                           fieldLabel   : '',
                           labelSeparator : '',
                           frame        : true,
                           title        : 'Instructions',
                           html         : 'Please fill in the form',    // panel 안에 들어갈 html 형식의 text
                           anchor       : '-4'
                       }
                ]
    });
   
    myWin.show();
</script>
</body>
</html>


주석만 보아도 다 알만한 내용들.

저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

Ext JS - 8. List of component xtype.  (0) 2010.01.21
Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 5. applyTo, renderTo, contentEl 의 차이점  (0) 2010.01.14
Ext JS - 4. Events 등록과 Event Listeners  (0) 2010.01.14
Ext JS - 3. Burst Events in action  (0) 2010.01.14
Posted by Xeoness
, |

Ext JS - 5. applyTo, renderTo, contentEl 의 차이점

Web Programming/Ext JS / 2010. 1. 14. 14:58
뭐가 다른건지 잘 알지 못하겠어서 forum에 가서 뒤적였더니 누군가가 이미 질문을 하고 Animal(유명하군... 저게 진짜 그 사람 얼굴일까??? 중후하게 생긴게 분위기가 숀 코넬린데 ㅋ)님이 답글을 이미 달아놓았다.

renderTo renders the Component into the specified existing element.

==> renderTo는 기존의 element에 component를 rendering 하는 것이다.(즉, 컴퍼넌트 내의 새로운 element를 생성해서 사용할 때 사용한다는 말)

applyTo uses the specified alement as the main element of the Component. A Component created using applyTo does not need rendering - its main element already exists.

==> applyTo는 component의 기본 element에 적용시킬 때 사용.  applyTo를 이용해 생성된 component는 rendering을 필요로 하지 않는다. (기본 element는 component가 생성될 때 이미 만들어지므로)

contentEl is only for Panels. It simply moves the specified element into the body of the Panel when the Panel is rendered to use... as the content!

==> contentEl은 Panel에서만 사용됩니다. Panel이 생성되어진 이후 content와 같은 지정된 element를 Panel의 body로 손쉽게 넣을 수 있습니다.


대충 이런 느낌? ㅋㅋㅋ
저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 6. Form 생성  (0) 2010.01.21
Ext JS - 4. Events 등록과 Event Listeners  (0) 2010.01.14
Ext JS - 3. Burst Events in action  (0) 2010.01.14
Ext JS - 2. Dom based Events  (0) 2010.01.14
Posted by Xeoness
, |

Ext JS - 4. Events 등록과 Event Listeners

Web Programming/Ext JS / 2010. 1. 14. 12:00

Ext-based event가 실행되기 전에 각각의 event가 등록이 되어야 한다. 일반적으로 addEvent method를 이용한다. 아래의 예제를 보자.

var myObservable = new Ext.util.Observable();
myObservable.addEvents('sayHello');
myObservable.addEvents('sayGoodbye');

하나 이상의 event를 등록할 때 아래와 같이 해도 된다.

myObervable.addEvents('sayhello', 'saygoodbye');

Object 형식을 event로 지정할 수도 있다.

myObservable.addEvents({
    'sayHello'        : true,
    'sayGoodbye'  : true
})

event를 생성하였으면 event handler가 필요하다.

myObservable.on('sayHello', function() {
console.log('Hello stranger');
});

sayHello event에 대한 event handler를 생성하였다. 3강에서의 예제처럼 event가 발생하면 firebug의 console 창으로 'Hello stranger' 라는 message를 출력하는 event이다. 아래와 같이 event를 호출해본다.

myObservable.fireEvent('sayHello');


event가 호출되며 Firebug console 창에 'Hello stranger' 라는 message가 호출되는 것을 볼 수 있다.

완성 src :

var myObservable = new Ext.util.Observable();

myObservable.addEvents({
    'sayHello' : true,
    'sayGoodbye' : true
    })
   
myObservable.on('sayHello', function() {
console.log('Hello stranger');
});

myObservable.fireEvent('sayHello');

console 창에 나타난 결과:









대부분의 event들은 파라미터를 사용한다. 'sayGoodbyeFn' event에 2개의 파라미터를 주어보자.

var sayGoodbyeFn = function(firstName, lastName) {
console.log('Goodbye ' + firstName + ' ' + lastName + '!');
}
myObservable.on('sayGoodbye', sayGoodbyeFn);

2개의 파라미터를 인자로 받는 sayGoodbyeFn 이라는 event를 생성하였다.
이제 myObservable.on 함수를 이용하여 event를 호출해 보자. 아래와 같이 추가해 준다.

myObservable.fireEvent('sayGoodbye', 'John', 'Smith');

FireFox에서 실행을 해보자.

console 결과:



 
event를 호출할 때 scope 영역을 지정해 주지 않으면 호출한 component 안에서만 유효하다는 것을 기억해 두자.

event가 더 이상 필요없다면 삭제해 주는 method가 있다.

myObservable.removeListener('sayGoodbye', sayGoodbyeFn);

저작자표시

'Web Programming > Ext JS' 카테고리의 다른 글

Ext JS - 7. Simple container layout 생성  (0) 2010.01.21
Ext JS - 6. Form 생성  (0) 2010.01.21
Ext JS - 5. applyTo, renderTo, contentEl 의 차이점  (0) 2010.01.14
Ext JS - 3. Burst Events in action  (0) 2010.01.14
Ext JS - 2. Dom based Events  (0) 2010.01.14
Posted by Xeoness
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리툴바