Javascript/ExtJS15 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. 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. 이전 1 2 3 다음
