extjs12 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. panel collapse를 화살표 클릭 시에만 동작 하도록! titleCollapse가 동작을 안하네? ExtJS에서 panel의 collapsible이 true로 설정되면 해당 panel은 확장/숨김이 가능해진다.그런데 말입니다.여기에서 header 또는 타이틀을 클릭 시에도 확장/숨김 기능이 동작하는데, 화살표만 클릭 해서 동작하게 하고 싶어서 관련 문서를 찾아봅니다. 찾았다, titleCollapse 딱 속성 이름만 봐도 관련이 있어보입니다. titleCollapse를 false로 수정하고! 테스트! 윙? 잘되는데...? 왜 안막히는거지... 혹시 수정된 소스코드가 반영이 안되었나? 찾아봅니다. 반영 됐습니다.그럼 무엇이 문제일까? 문서를 자세히 읽어 봅니다. When a panel is used in a Ext.layout.container.Border, .. 2018. 8. 3. 간단하지만 실수 할 수 있는 최적화 가볍게! 더 가볍게! Sencha 블로그에서 최적화에 관한 글이 있어서 적어본다. 반복문 최적화 나쁜 예 function badTotalFn(menuItem) { var r = store.getRange(), total = 0; Ext.Array.each(r, function(rec) { total += rec.get(menuItem.up('dataIndex').dataIndex); });}좋은 예 function goodTotalFn(menuItem) { var r = store.getRange(), field = menuItem.up('dataIndex').dataIndex; total = 0; for (var j = 0, l = r.length; j 2018. 7. 20. 트리 스토어 어떻게 순회할까? 트리 순회하기 평소 Store를 순회하는 방식 Ext.Array.each(items, (item) => { // 로직 });위의 방식으로 TreeStore를 순회했더니 1계층만 순회 되는걸 발견! 찾아보니 TreeStore는 위의 방식으로 순회하면 안된다. treeView.getRootNode().cascade((node) => { // 로직 });이렇게 해야 모든 node 순회. 트리의 모든 node를 순회하는 일이 많지 않지만 필요할 때 사용. 더 좋은 방법이 있다면 댓글에 알려주세요! 제발 2018. 7. 19. Store load가 완료되지 않은 시점에 다시 load가 들어온다면 Load 다중 발생 프론트를 개발하다보면 항상 예상치 못한 문제점을 마주치곤 한다. 예를 들면, 트리 리스트 또는 그리드에서 사용자가 키보드 입력으로 빠르게 이동 할 시 해당 이벤트 마다 Store에 load 이벤트가 있다면? 만약 전에 발생한 load가 데이터가 많아 늦게 도착했다면 화면에 보여지는 데이터가 선택된 항목의 값이 아닌 이전에 선택된 항목의 값이 나올 수 있다. (데이터를 load하는 Store가 같다는 가정) 해결책은? 키보드 입력 이동을 막는다. 이벤트 발생 buffer를 둔다. 키 입력(키보드 up)이 끝나는 시점에 load 시킨다. 아직 Store가 loading 중이라면 중단 후 새로 load 기타 등등(다른 아이디어는 지금 당장 안떠오름.) 내가 사용한 방법은 2가지 select.. 2018. 7. 13. 이전 1 2 다음
