본인기준으로 extjs 문법을 습득 하려고 하였을때 처음에는 꽤나 답답하면서 진척율도 나가지 않았었습니다.
처음으로 extjs를 접했을때가 버전이 3이었을때만 해도 단순히 sencha사이트에서 제공하는 샘플링 소스를 베껴서 수정하는
정도였을뿐 응용을 전혀 못해보고 바로 포기를 했었습니다.
그러나 extjs 4가 나오면서 다시 한번 배우고자 시도를 했엇습니다.
한 1주정도는 버벅이다가 계속 보다보니 어느순간 올바른 코딩은 아니여도 원하는 화면이랑 기능들을 출력할수 있게는 되었지요.
jquery는 한줄~한줄~ 코딩하면 되지만 extjs는 기본 틀이 json 유형입니다.
구글링이나 앞으로올릴 예제들을 보시면 소스들이 대부분
xxx : {
}
bbbb : [
{
}
]
이런형식의 소스들이 대부분일것입니다.
뭐 UI 구조를 정의할때만 쓰는거고 function들은 일반 코딩하는것처럼 하면 되는것입니다.
우선 앞으로 올리고자 계획하고 있는 순서는
기본적인 문법으로 진행을 하고 그 후에 아이템을 선택하여 샘플링으로 extjs에 다가가고자 글을 올릴예정입니다.
감사합니다.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[ExtJS강좌 5] 다이얼로그창 띄우기 (0) | 2014.06.06 |
---|---|
[ExtJS강좌 4] 윈도우 화면 띄우기!! (0) | 2014.06.06 |
[ExtJS강좌 3] 레이아웃 잡아보기(2) (0) | 2014.06.05 |
[ExtJS강좌 2] 레이아웃 잡아보기(1) (0) | 2014.06.03 |
[ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....] (23) | 2014.06.03 |
ExtJS 5.0이 릴리즈가 되었다... ㅠㅠ
한번 다운로드를 받고 세팅을 해보자!! +_+ㅋㅋ
현재 메인화면에서 다운로드는 45일 TRIAL 버전밖에 보이지 않지만 GPL 버전의 소스를 받아
서 문법을 익혀보겠다!
다운로드 주소는 http://www.sencha.com/products/extjs/details 여기에서 맨밑으로
스크롤 내려보시면 다음과 같은 화면이 나올것임
주저하지 말고 다운로드버튼 클릭!!
다운로드를 받았으면 압축파일이 나오는데 압축을 해제해주시고~
개발툴은 뭐가 되든 상관이 없음!
저는 이클립스툴로 작업하도록하겠습니다.
개발환경은
이클립스 + JDK 1.7, + TOMCAT 7 + EXTJS 5입니다.
프로젝트 생성 및 서버 돌리는 방법은 알고 계신다고 가정하고 해당 부분은 생략!!
1. 생성 프로젝트명 : extjs_sample
우선은 ext-5.0.0에서 packages 디렉토리를 extjs_sample 디렉토리에 복사! 붙여넣기!!
그리고 /ext-5.0.0/build/내에 extxxxx.js 파일들이 많은대 그냥 ext-all.js 파일만
복사 + 붙여넣기 하자.
최상단에 있는 extxxxx.js는 동작안됨 build 내에 있는 extxxxx.js를 include 해야함!
이걸로 ExtJS 세팅은 끝났다.
다음 3개의 소스를 신규 생성한 HTML 페이지에 include해준다
<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
테마는 다양하지만 본인은 이번에 새로 추가된 crisp 테마를 적용하도록 하겠다.
jquery의
$(document).ready(function(){
});
문법처럼 ONLOAD시 HELLO WORLD 메시지창을 띄워줄것이다.
EXTJS는
Ext.onReady(function(){
});
에 기술할것이다.
단순하게 스크립트 alert을 띄워도 되지만 있어보이게 Ext에서 제공하는 alert 메시지 UI를 적용해보겠다
Ext.Msg.alert('타이틀영역', '헬로우 월드');
코드를 onready 안에 넣어보고 html페이지를 실행하면
다음 화면과 같이 나올것이다!
아 crisp 테마 ... neptune보다 더 깔끔해보여서 좋다!! ^_______________________^ ㅋㅋㅋ
소스랑 프로젝트 구조도 캡처!!
- 소스 -
-디렉토리 구조 -
이클립스 쓰시는 분들중, maven 쓰시는 분들은 저구조가 아닐것입니다.
세팅은 참 심플하죠잉~~~ ? ㅎㅎ
천~~~천~~~히 가는거임...
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[ExtJS강좌 5] 다이얼로그창 띄우기 (0) | 2014.06.06 |
---|---|
[ExtJS강좌 4] 윈도우 화면 띄우기!! (0) | 2014.06.06 |
[ExtJS강좌 3] 레이아웃 잡아보기(2) (0) | 2014.06.05 |
[ExtJS강좌 2] 레이아웃 잡아보기(1) (0) | 2014.06.03 |
ExtJS에 대한 개인적인 생각 (0) | 2014.06.03 |
jQuery의 핵심중 하나라고 생각하는 셀.렉.터!!!
셀렉터란 무엇인가 예를 들어서 id로 특정 값을 찾는거는 쉽죠..
class로 같은 명의 버튼이 여러개고 또 같은명의 class를 가진 text 태그가 여러개일경우!
특정이벤트 발생시 특정 태그를 찾아가는 서비스~ 라고 생각하시면 되실려나.. 저도 머리는 아는데 설명을 잘 못하겠습니다...
셀렉터 이벤트들도 많고...
http://api.jquery.com/category/selectors/
필요한 셀렉터들은 여기에 다 모여있습니다 ㅎㅎㅎ
기본적으로 parent() / find() / next() / prev() 태그들을 설명드릴수 있겠는대요
parent() = 현재태그를 감싸고 있는 부모를 찾는다
예제)
<div>
<input type="button" id="btn" />
<input type="button" id="btn2" />
</div>
$("#btn").parent() <- 이렇게 줄경우는 btn 아이디를 감싸고 있는 div 태그놈을 찾는것입니다.
find(id or class or input ...) = 현재태그 안에 속하는 자식을 찾는다
예제)
<div id="prnt">
<input type="text" id="aaa" />
</div>
$("#prnt").find("#aaa") = prnt 아이디를 가진 div 태그가 감싸고 있는 자식들중 id값이 aaa인놈을 찾는다.
next() = 현재태그 다음 태그를 찾는다.
<input type="text" id="a" />
<input type="text" id="b" />
$("#a").next() = a 아이디를 가진 input 태그의 형제태그들중 a태그 바로 다음에 있는 태그를 찾는다.
그 태그는 ? id가 b를 가진 text 태그이군요
prev() = 현재태그 직전 태그를 찾는다.
이건 next반대로
<input type="text" id="a" />
<input type="text" id="b" />
$("#b").prev() = b 아이디를 가진 input 태그의 형제태그들 중 b 태그 바로 전에 있는 태그를 찾는다.
그 태그는 ? id가 a를 가진 text 태그이군요
기존에 했던 풀소스가 아니여서 이해가 안가시나요?
그럼 샘플자료를 보시죠
무조건 예제는 버튼 클릭이벤트를 시작으로!!
길이 길어지면 저역시 피곤해하는 타입이라 일괄처리로 예제를 만들었습니다!
소스랑 화면은 다음과 같고요
실행 결과네요 ?
동작은 일괄처리 버튼 클릭해서 각각의 parent / find / next / prev를 이용하여 console에 값들을 뽑았습니다 ㅎㅎㅎ
첫번째 콘솔값 설명
id btn이란 버튼을 시작으로 부모태그의 클래스값을 찍어봤습니다!
두번째 콘솔값 설명
id prnt 라는 div 태그를 시작해서 안에 들어있는 태그들중에 id가 aaa라는 태그의 value를 찍어봤습니다!
세번째 콘솔값 설명
id가 a인놈의 다음 태그의 value를 찍어봤습니다
마지막 콘솔값 설명
id가 b인놈의 이전 태그의 value를 찍어봤습니다.
한꺼번에 뿌려져서 헷갈리다 하시는분은! console.log가 총 4개있는데 하나씩만 적어서 출력해보세요
그럼 이해를 하실듯.... ????
끝
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
---|---|
[jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
[jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
[jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
프로젝트 진행중이라 많이 올려봐야 한두개네요;;
빨리빨리 글을 등록하고 싶지만... 바쁘다는 핑계로... ㅈㅅ;;
오늘 이벤트의 예제순서는~
1. 버튼을 클릭
2. 두번째 태그에 포커스 주기
3. 포커스가 주어진 상태에서 키보드의 이벤트 코드를 크롬(콘솔)에 찍어 볼것이다.
이번에도 소스 + 결과 화면부터 보고 가시죠..
아 전달 못드린게 있었는데 연습만이 살길입니다!
이해 못하신다? 그럼 무한 반복~ 제가 해드릴수있는거는 답은 못드리지만 길은 드릴려고 하는 것입니다!
자 그럼 소스를 설명하자면~
위 -> 아래 -> onload 였죠?
html 소스를 화면에 뿌려줍니다.
onload로 가면~
id가 button인 놈에게 클릭이벤트를 줬네요? 주면 뭐가 반응 하게 되있나... 보자...
id가 txt2인놈에게 forcus() <---??? 모지? 포커스... 정확히 뭐하는 놈인지 모르니 패스~
그다음은
id가 txt2인 놈에게 keypress 이벤트 줬네요? 암튼 이벤트 동작하면 실행되는놈은
console.log e.which 아 어려워~~
샘플이나 실행해봐야 겄다
캡처에는 나오지 않지만 버튼 클릭해서 두번째 텍스트 태그에 깜빡깜빡 가게 되어있는 상태입니다.
그리고 깜빡이는 태그상태에서 123456을 입력하니까
크롬 console에 코드번호 : 숫자값
이렇게 나왔습니다.
소스랑 대입하면 아하~ 이해 가실듯...
button click 이벤트내에 기술되어있는 소스는
버튼 클릭하면 txt2 아이디 태그에 포커스를 주는 거고..
keypress 태그는
키보드 이벤트를 받는 거였군요!!!
이해 가셨나요? 이해 못하셨다면 연습연습!!
이벤트는 대략 적으로 여기에서 마무리 하고요 나머지 이벤트들이 많긴할텐데 다른 동작들이랑 연동하면서 사용할 예정입니다~
다른 이벤트들이 필요하신 분들이 계시다면
전에 알려드린
http://api.jquery.com/category/events/
jquery 이벤트 문서를 보시면서 공부하시길~
끝.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
---|---|
[jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
[jQuery 5장] 이번에는 클릭이 아닌 더블클릭을 할꺼야! (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
[jQuery 3장] 버튼 클릭클릭! (0) | 2014.05.14 |
3장은 한번 클릭이었다면 이번에는 더블클릭이다!! 따닥?
소스보기~
오~ alert 나왔다~
jquery 쉬우다 쉬워!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
---|---|
[jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
[jQuery 4장] change 이벤트 셀렉트 박스 변경 해보긔~ (4) | 2014.05.14 |
[jQuery 3장] 버튼 클릭클릭! (0) | 2014.05.14 |
[jQuery 2장] 태그들을 id,class,name으로 찾고 싶어요~ (0) | 2014.05.14 |