Category Archives: JavaScript

[책펌] 센차터치(Sencha Touch)에서 라이브러리 동적 로딩(requires)을 위한, 패키지 경로 및 네임스페이스 설정 예시

By | 3월 6, 2014

– 출처: 센차터치2+폰갭 프로그래밍 –   ※ 예제 파일 경로 /index.html => base 문서/js/app.js => 센차 어플리케이션 js 파일 (index.html에서 로딩)/js/package1/sub1.js => 로딩할 모듈   app.js //네임스페이스 지정 Ext.ns(‘main’); Ext.application({ name: ‘Path’, //실험 결과, requires의 기준경로는 application을 로딩한 html파일이 있는 곳이다. requires: [ ‘Ext.Panel’, ‘Ext.Toolbar’, ‘js.package1.sub1’ //사용자정의 모듈 로딩 ], launch: function(){ main.panel = new… Read More »

[책펌] 센차터치(Sencha Touch) 클래스 상속 및 사용자정의 이벤트 활용 예제

By | 2월 24, 2014

– 출처: 센차터치2+폰갭 프로그래밍 –   Ext.application({ name: ‘EventExtend’, requires: [‘Ext.Panel’, ‘Ext.Button’], launch: function(){ //Ext.Button을 상속한 userButton 클래스 정의 Ext.define(‘userButton’, { extend: ‘Ext.Button’, config: { //config에 지정된 속성은 getter, setter가 자동생성된다. width: 200, height: 200, text: ‘가운데로’, listeners: { tap: function(){ this.fireEvent(“pupu”); //사용자정의 이벤트 pupu를 트리거 함. } } } }); var panel = Ext.create(‘Ext.Panel’,… Read More »

[책펌] 자바스크립트 클로저(closure)에 대하여

By | 1월 7, 2014

– 출처: 이펙티브 자바스크립트(인사이트), 자바스크립트 핵심 가이드(한빛미디어) –   * 클로저란? – 자신을 내포하는 함수의 문맥(context)에 접근할 수 있는 함수. – 함수 자신이 포함하는 스코프의 변수들을 추적하는 함수.   * 클로저의 특징 – 외부함수의 실행 스코프가 종료된 상황에서도, 외부함수의 지역변수를 클로저가 참조하고 있다면, 해당 변수의 사본이 아닌 참조 자체를 클로저가 접근하여 값을 변경할 수 있다.… Read More »

jqGrid의 기본 콤보박스(select)에 이벤트 바인딩 하기

By | 5월 30, 2013

* 칼럼모델 > editoptions > dataEvents 속성을 정의해 준다. {name:’TAX_GBN’,   index:’TAX_GBN’,   width:90, editable:true,  edittype:’select’, formatter:’select’, align:’center’,   editoptions:{   value:’1:A;2:B;3:C’,     dataEvents:[{ type:’change’, fn: function(e){ var rowId = $grid1[0].p.selrow; alert(rowId);         }}]   }   },

[펌글] 파일 업로드를 하기 전에 자바스크립트로 파일 사이즈 얻기 (javascript file size check before uploading)

By | 3월 7, 2013

– 출처 : http://iamyour.tistory.com/entry/javascript-file-size-check-before-uploading –  javascript 혹은 Jquery 에서 업로드 하기 전에 파일 용량을 체크할 수 있다. 다만 IE 에서는 작동하지 않는다.  (IE 에서 active-X를 사용하여 구현할 수 있지만 추천하지 않는다.) 관련자료 2번째 링크를 참고하면 IE에서는 click 이벤트를 해야 작동하는 것 또한 확인 할 수 있다.   $(‘#file’).bind($.browser.msie? ‘propertychange’: ‘change’, function(){     var f=this.files[0];  … Read More »

IE7에서 다른 문서(document)의 객체간에 jQuery의 append()를 사용했을 경우의 스크립트 에러에 대하여

By | 3월 6, 2013

* 개요    이 에러는 오직 IE7에서만 발생하는 에러이다.   서로 다른 문서(ex: 다른 프레임)의 객체간에 jQuery의 append()를 사용했을 경우    스크립트 에러가 발생하는 것이다. * 소스 (오류 상황)    – $(‘#mainBox’, mainFrameDoc).append( $(‘#topBox’, topFrameDoc).children().clone() ); * 해결    – 원인을 정확히 파악한 근본적인 해결책은 아니지만 workaround로서 innerHTML로 처리함.      (innerHTML의 경우 1 depth 아래로 들어가는 것에 주의한다.)… Read More »

window 객체의 screenTop, screenLeft, screenX, screenY 속성에 대하여

By | 2월 22, 2013

이 속성들은, 윈도우 바탕화면의 왼쪽 위를 기준으로 삼아 window 객체의 좌표를 측정하는 것들이다. 기본적으로는 screenTop, screenLeft 를 사용하지만,  FireFox에는 해당 속성이 없어서 screenX, screenY를 사용한다. 그런데 문제는, 각 브라우저에서 위의 값들이 의미하는 바가 다르다는 것이다. 좀 더 테스트를 해 봐야 알겠지만… 프레임셋으로 구성된 화면을 각 브라우저에서 호출하면,  IE에서는 각 프레임을 구성하는 window 객체를 대상으로 좌표를… Read More »

window.name 을 설정했다가 없앴을 때에도 계속 설정한 name이 남아 있는 이유

By | 2월 15, 2013

생각해 보니 window 객체는 DOM이 아니라 BOM(Browser Object Model)이었다. 그러므로 객체에 셋팅한 프로퍼티가, 문서 단위로 reload 되는 것이 아니라, 브라우저 단위로 reload 되는 것이었던 것이었다!! 따라서 window 객체에 name을 계속 셋팅하면 계속 갱신되지만, name을 셋팅 했다가 name을 셋팅한 구문을 제거한다고 해도, 문서가 reload 되는 것에 관계 없이 브라우저에 해당 정보가 남아있으므로  name이 지워지지 않았던 것이었다. 그러므로… Read More »

jQuery TreeView 플러그인 사용시, IE7 (혹은 호환성모드)에서 트리가 깨지는 경우

By | 2월 13, 2013

※ 완벽한 해결책은 아니지만, 다음의 방법으로 일단 깨지는 것을 막을 수 있다. * 트리가 만들어지는 페이지에 다음의 스타일 추가      <style type=”text/css”>       ul, li { zoom: 1 }   </style> * 완벽하지 않다고 한 이유는, 트리의 2depth 이상에서 트리를 펼칠 때 트리가 약간 (1픽셀 정도) 위로   움직이는 현상이 있었기 때문이다. (IE7 혹은 호환성보기에서만)

jQuery UI의 dialog 위젯으로 로딩이미지 생성시, 오페라 브라우저 (opera)에서 빨간 테두리가 생기는 현상

By | 1월 31, 2013

* 오페라 브라우저는 포커스가 간 엘리먼트에 빨간 테두리를 쳐 버리는 특징이 있는 것 같다.   검색을 조금 해 보니 이것은 버그도 아니고 브라우저 설계시 그렇게 되도록 만든 것 같다.   jQuery UI의 dialog 위젯으로 로딩이미지를 만들었을 경우, 로딩이미지가 show() 될 때   로딩이미지의 부모 엘리먼트에 포커스가 가서 빨간 테두리가 그려지는 문제가 간혹 생겼는데,   그래서 부모 엘리먼트의 tabindex 속성… Read More »