Javascript34 아직 그려지지 않는 컴포넌트에 이벤트 핸들러 추가하기 ExtJS에서 컴포넌트에 이벤트를 추가하는 방법은 여러가지가 존재한다. 생성 시에 listeners에 추가하기 addEventListener를 이용해서 추가하기 .on 함수 .mon 함수 기타 등등 하지만 생성 시에 추가하지 않고 나중에 추가하려고 하는데 아직 화면상에 렌더링이 되지 않았다면 on, addEventListener, mon 함수를 사용해서 추가 할 수 없다. 어떻게 해야할까? 컴포넌트.listeners = [{ click: function, select: function, }, 컴포넌트.listeners ]위의 방식대로 하면 기존 select와 click 이벤트는 유지한 채 추가된다. (덮어쓰기가 아님) 2018. 9. 5. Dataview 선택이 풀려버리는 증상 Dataview에서 아이템 선택이 풀려버린다? Dataview에서 아이템을 클릭하다보면 어느 순간 selection이 풀려있는 아이템을 볼 수 있다. 코드 로직에서 잘못됐나 살펴봤지만 문제점을 찾지 못하던 중 Dataview의 container 관련 이벤트를 핸들링 해보니...여기가 문제였다. 무엇이 문제였을까? 사용자는 Dataview의 아이템을 클릭하길 원했다. 하지만 간혹 Dataview의 container가 클릭되는 현상이 발생한다. 이렇게 되면 클릭은 했는데 Dataview 아이템은 선택이 안되어있는 버그처럼 보이는 증상이 발생한다. 해결책은 간단하다. containerclick 또는 beforecontainerclick 이벤트에서 return false; container 클릭 시에는 무시 해.. 2018. 9. 4. Form Panel 유효성 검사 안보이는 항목은 제외 시켜줘! Form Panel 내에서 컴포넌트들을 동적으로 숨김/보임 상태로 UI가 구성되어 있을 경우, form.isValid() 함수 사용 시 안보이는 컴포넌트도 유효성 검사에 실패하게 되어있다. 내부 소스를 살펴보게 되면 컴포넌트가 disabled 상태일 경우에는 무조건 유효성 검사 성공으로 처리가 되어진다. 이 부분을 이용해서 hidden 상태 일경우 disabled를 true로 바꿔주는 bind를 사용하면 쉽게 구현 가능하다. 2018. 8. 21. Tab bar는 남겨두고 하위 패널만 접고 싶은데? 우선 config상에는 해당 기능이 없다. 그럼 어디? 직접 구현해야 한다. 그래서 내가 구현한 방향에 대해서만 설명하려고 한다.구현하려는 UX는 "Visual Stuido Code" 에디터의 왼쪽 네비게이션 사이드 바 이다.(다른 탭을 누르면 이동하고 자기자신의 탭을 클릭하면 탭패널이 접힌다.) Tab Click 이벤트 핸들러 필요 Tab Change 이벤트 핸들러 필요 Tab은 사실상 button 컴포넌트를 확장 시킨 컴포넌트, 그러므로 enableToggle config 사용 위의 3가지 사항은 준비사항. Tab Click 자기 자신의 탭만 Collapse/Expand 시키는게 포인트. 즉, 현재 탭에서 다른 탭으로 이동 시에는 현재 탭 값만 변경. Collapse/Expand는 너비 값 조정으로 .. 2018. 8. 21. ExtJS에서 scroll 이벤트 잡기 Scroll을 잡아줘! 대부분의 개발에 있어서 Scroll 이벤트를 사용하는 경우는 드문데, 이번에 필요하게 되서 사용하고 남겨본다. Ext 컴포넌트의 이벤트 목록에는 Scroll 관련해서 이벤트가 없기 때문에 DOM element의 scroll을 이용한다. Grid 스크롤 이벤트를 잡는 예제 grid.mon(grid.getView().getEl(), { scope: grid, scroll: function () { console.log('scrolling'); } }); 2018. 8. 7. ExtJS 객체지향 시스템 ExtJS 객체 시스템 클래스 시스템 우리가 클래스하면 가장 익숙한 단어는 '상속'이다. ExtJS에서는 상속을 간단히 사용할 수 있게 제공한다. Ext.define('HeadlessGrid', { extend: 'Ext.grid.Panel', hideHeaders: true,});위의 클래스는 기본 grid 패널을 상속받아 만든 제목이 없는 grid 패널이다. 네임 스페이스 '라이브러리'를 제작하는 방법도 간단하다. 바로 '네임스페이스'를 이용하면 가능하다. 위의 예제 코드를 응용해보자. Ext.define('Ext.Juice.HeadlessGrid', { extend: 'Ext.grid.Panel', hideHeaders: true,});위의 코드는 이제 Ext.Juice 네임스페이스에 포함된다. 클.. 2018. 8. 4. 이전 1 2 3 4 5 6 다음
