블로그 이미지
올해목표 // 10월 어학연수 떠나자~ 자수씨

카테고리

전체글 (1457)
Brand New! (28)
주절주절 (213)
MOT (11)
해외쇼핑 (49)
쇼핑노트 (150)
취미생활 (94)
iPhone (4)
Eclipse (121)
Google (83)
Spring (31)
JAVA (176)
JavaScript (59)
WEB (49)
Database (20)
OS (26)
Tools (8)
Tips (26)
IT정보 (1)
Book (21)
Programming (37)
외부행사 (43)
주변인들 (17)
여행노트 (60)
학교생활 (30)
회사생활 (52)
사회생활 (5)
외국어공부 (12)
잡동사니 (30)
Total
Today
Yesterday
 
12-12 07:04
 

달력

« » 2024.12
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 31
 

최근에 올라온 글

최근에 달린 댓글

자바스크립트로 엘리먼트들을 제어하다보면 뒤로가기 시 정상적으로 화면이 표시되지 않는 경우가 있다.

뒤로가기를 막을 수 있는 상황이라면 막는 것이 가장 깔끔하다.


history.pushState(null, null, location.href);

window.onpopstate = function(event) {

history.go(1);

};


위의 로직은 history 에 현재 페이지를 추가하고, 뒤로가기 시에 현재 페이지로 이동을 시켜 뒤로가기가 동작하지 않게 한다.


참고자료: http://stackoverflow.com/questions/16182993/how-to-prevent-a-browser-from-going-back-forward-in-history-when-scrolling-horiz



Posted by 자수씨
, |


해당 일자가 몇째주인지 확인하는 함수를 만들어보았습니다.




일단 되는 것 같으니... 


Posted by 자수씨
, |




갑자기 찾아든 오류... 분명 크롬에서는 이런일이 없었는데... 같은 부분인데 일부 페이지에서만 발생한다.


jquery 오류인가 싶어서 찾아보니 그건 아닌 듯 하다. 가장 도움이 된 링크(http://kr.tutorialboat.com/73) 를 보면 target 에 스페이스가 들어갈 경우 IE 에서만 간혹 발생한다고 한다.


target 에 대쉬(-) 를 넣었는데, 그게 문제였나보다.



음... 조금 더 찾아보니 스크립트 오류가 있었다. 이러한 경우 타겟에 대쉬나 스페이스가 들어가면 잘못된 인수 오류가 발생하는 듯 하다.




Posted by 자수씨
, |

브라우저가 다양해지면서 IE를 메인 브라우저로 사용하지 않게 된지 오래되었다. 개발할 때도 디버깅하기 편한 크롬으로 많이 작업하고 있는데, 개발 시 잘 돌아가던 부분이 IE에서 테스트하니 오동작을 발생시켰다.


문제는 Date 객체...


1. new Date('2014.05.27');

2. new Date('2014.05.27 10:40');

3. new Date('2014-05-27');

4. new Date('2014-05-27 10:40');

5. new Date('2014-05-27T10:40');


위의 예제 중에 IE에서 정상적인 결과 값을 얻을 수 있는 것은 무엇일까?


정답은 3 번이다. 5번은 파싱은 되지만 크롬에서는 원하는 결과를 얻을 수 없다.





5번의 경우 IE 와 크롬에서는 상이한 값이 나오므로 해당 방식으로만 사용하지 않으면 멀티 브라우저에 대응하는 날짜 파서 함수를 사용할 수 있다.


Posted by 자수씨
, |


역시 정규식이 짱!!!





Posted by 자수씨
, |

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (4)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (5)

모델의 데이터 저장하기

지금까지 만든 그리드를 더블 클릭하여 보여지는 수정 창은 실제로 저장이되지 않습니다. 이번에는 저장버튼 클릭에 대한 처리를 진행합니다.

[수정] app/controller/Users.js


'useredit button[action=save]' 라는 ComponentQuery selector 에 의해 저장 버튼 클릭에 대한 이벤트 핸들러를 추가하였습니다.

'useredit button[action=save]' 는 아래의 의미로 해석됩니다.
useredit: 'widget.useredit' 로 등록된 컴포넌트의
button: 버튼 중에
[action=save]: action config 가 save 인


아래와 같이 정상적으로 핸들러에서 처리가 되는지를 확인한 후 다음단계로 진행합니다.



[수정] app/controller/Users.js


 updateUser() 함수에서 up, down 함수를 이용하여 그리드의 레코드의 값을 변경하는 작업을 통해 아래와 같이 레코드가 변경된 것을 확인할 수 있습니다.




서버에 저장하기

지금까지는 Users 스토어에 하드코딩된 두개의 레코드를 사용하였습니다. AJAX 를 이용하여 손쉽게 데이터를 로드해보도록 하겠습니다.

[추가] data/users.json


스토어에서 하드코딩된 레코드를 제거하고 proxy 를 추가하여 서버에서 데이터를 주고 받을 수 있도록 수정합니다.

[수정] app/store/Users.js



proxy api 를 통해 손쉽게 read, update 에 대한 처리를 할 수 있습니다.
[수정] app/store/Users.js


[수정] app/controller/Users.js::updateUser()


컨트롤러에 store, model, view 를 등록하게 되면 get 함수가 자동으로 등록이 됩니다.
지금까지 작성된 컨트롤러를 예를 들면, getUserModel(), getUsersStore(), getUserListView(), getUserEditView() 함수가 추가되어 컨트롤러에서 사용이 가능합니다.

스토어의 sync() 함수를 통해 proxy api 의 update 처리를 하였습니다.




이상으로 Ext JS 4 - MVC 구조를 이용한 시작하기를 완료하였습니다. Ext JS 3 보다는 확실히 구조화되어 그들의 뜻만 이해한다면... 자바만큼의 개발 퍼포먼스를 낼 것 같습니다. 개발툴만 지원된다면... 좋을테지만...


파일구조




참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture


Posted by 자수씨
, |

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (4)

Store 만들기

지금까지 'Vicki.view.user.List' 컴포넌트는 내부에서 스토어를 생성했었습니다. 이번 작업은 다른 곳에서 스토어를 참조하여 수정이 가능한 구조를 만들 예정입니다.

[추가] app/store/Users.js


컨트롤러에서 새로 추가한 스토어를 로드하도록 변경합니다.
[수정] app/controller/Users.js


그리드 리스트에서도 내부 스토어를 생성하는 대신에 참조하는 로직으로 변경합니다.
[수정] app/view/user/List.js



Model 만들기

위에서 만든 스토어도 내부에서 필드를 정의하고 있습니다. Ext JS 4 에서는 강력한 기능을 가지고 있는 Ext.data.Model 클래스를 통해 모델을 정의할 수 있습니다.

[추가] app/model/User.js


컨트롤러에 모델을 등록합니다.
[수정] app/controller/Users.js


스토어에서 생성한 모델을 사용하도록 수정합니다.
[수정] app/store/Users.js



컴포넌트 내부에 스토어를 정의하는 것과 다양한 기능을 제공하는 스토어와 모델을 정의하여 사용한 결과물이 아래와 같이 동일하게 나오는 것 까지 확인하였습니다.



파일구조




참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Posted by 자수씨
, |

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)

그리드 제어하기

'onPanelRendered' 함수는 여전히 호출되고 있습니다. 'viewport > panel' 셀렉터에 의해서 동작을 하게 됩니다. 우리가 생성한 List 클래스는 그리드를 상속받았는데, 그리드는 패널을 상속받았기 때문입니다.


'Vicki.view.user.List' 클래스만 컨트롤 하도록 컨트롤러를 수정합니다.
[수정] app/controller/Users.js


컴포넌트 셀렉터의 'userlist' 는 alias 가 'userlist' 정의된 클래스의 인스턴스들을 처리하게 됩니다.




수정 윈도우 추가하기

그리드 데이터를 수정할 수 있는 윈도우 클래스를 생성합니다.

[추가] app/view/user/Edit.js


'Ext.window.Window' 클래스를 상속받았으며, alias 는 'widget.useredit' 로 등록되었습니다. 추후에 xtype 'useredit' 로 로딩이 가능합니다. autoShow 속성이 true 로 설정되어 생성되는 즉시 보여지게 됩니다.

윈도우 내부에는 이름과 이메일 필드가 포함된 'form' 으로 구성되었습니다.

[수정] app/controller/Users.js


views 에 'user.Edit' 를 추가하고 editUser 함수를 수정합니다.
Ext.widget('useredit') 라는 함수를 이용하여 'Vicki.view.user.Edit' 인스턴스를 생성할 수 있습니다.
윈도우 내부 form 패널에 그리드에서 선택된 레코드 정보를 채워주게 됩니다.


down(String selector, [Boolean returnDom]) 함수는 CSS 셀렉터를 기반으로 자식요소를 검색합니다.





파일구조

지금까지 작업에 대한 파일구조는 아래와 같습니다.




참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture


Posted by 자수씨
, |

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)


뷰 정의하기

현재까지 app.js 와 app/controller/Users.js 를 이용하여 애플리케이션을 구성하였습니다.
이제 그리드를 이용하여 사용자를 표시할 수 있는 뷰 영역을 구성해보도록 하겠습니다.

[추가] app/view/user/List.js


슈퍼클래스의 함수를 호출하는 방식이 기존의 Ext JS 3 에서 사용하던 '[class].superclass.[function].apply(this, arguments)' 방식에서 'this.callParent(arguments);' 방식으로 표준화되었습니다.


뷰를 정의했으면 컨트롤러에 관련된 뷰를 추가합니다.
views 에 네임스페이스와 view 패키지를 제외한 나머지 이름으로 추가합니다. 'Vicki.view.user.List' 뷰를 추가하는 것이므로 'user.List' 를 컨트롤러의 views 속성에 정의합니다.

[수정] app/controller/Users.js


[수정] app..js


'Vicki.view.user.List' 의 alias 를 'widget.userlist' 로 정의하여 등록이 되었으므로, xtype 은 'userlist' 로 사용이 가능합니다.  




파일구조

지금까지 작성한 애플리케이션의 파일 구조는 아래와 같습니다.



참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Posted by 자수씨
, |

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)


컨트롤러 정의하기

서버사이드의 MVC 모델 처럼 각종 이벤트와 처리를 담당하는 컨트롤러를 정의할 수 있습니다.
Ext.application 생성 시에 정의했던 appFolder 밑에 컨트롤러 파일을 생성합니다. (app/controller/Users.js)


Ext JS 4 에서는 자바와 같이 패키징 네이밍 규칙에 대해 디렉토리 구조를 생성하여 자바 개발자들이 파일 구조에 대해 이해가 쉽도록 구성되어 있습니다.


[추가] app/controller/Users.js


[수정] app.js


생성한 컨트롤러를 애플리케이션에 추가하게 되면 자동으로 해당 자바스크립트 파일을 로드하게 됩니다. 컨트롤러의 init 함수는 Application 이 launch 되기 전에 호출이 되게 됩니다.





컨트롤러의 init 함수는 뷰에 대한 처리를 할 수 있으며, 다른 컨트롤러와의 연결에 사용하기도 합니다.
쉽게 예를 들어 패널이 렌더링 될 때 제어하기 위해서 control 함수를 이용할 수 있습니다.

[수정] app/controller/Users.js


Ext JS 4 에 추가된 것 중 하나가 ComponentQuery 입니다. 'viewport > panel' 은 "Viewport 의 직계 자손 컴포넌트 중 모든 Panel 을 찾아라" 라는 뜻입니다. ComponentQuery 의 자세한 내용은 기회가 되면 다시...

control 함수에 추가된 render 이벤트 핸들러에 의해 패널이 렌더링될 때 메시지에 콘솔 창에 출력되게 됩니다.






지금까지 작성된 프로젝트의 파일구조는 아래와 같습니다.




참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Posted by 자수씨
, |

글 보관함

최근에 받은 트랙백