ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/YOkY8ra_AOk 지난 시간부터는 샘플 프로젝트를 위한 템플릿을 제작중입니다. 오늘은 지난시간에 정한 메뉴목록 클릭 시, 중앙영역에 변경되는 컴포넌트를 변경해보도록 합니다. treelist → listeners → selectionchange 트리리스트 컴포넌트의 리스트 변경이벤트 selectionchange(this,record,eOpts) this : 트리리스트 자기자신 record : 선택된 노드의 레코드 값들 eOpts : 리스너에 전달된 옵션객체 특정 위치 컴포넌트 교체 폼필드 컴포넌트의 레이블 옵션 fieldLabel : Stringvalue 값에 정의를 하면 폼필드의 ..

ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/PExqR3Pt1LM 지난시간에 Spring Boot를 이용하여 기본설정을 진행했었습니다. 2017/04/12 - [ExtJS 6 동영상강좌] - ExtJS6 실전응용편 두번째 강좌 - Spring boot로 개발 환경 구성 및 API 연동 테스트 1장 (development environment and API test 2-1) 2017/04/12 - [ExtJS 6 동영상강좌] - ExtJS6 실전응용편 두번째 강좌 - Spring boot로 개발 환경 구성 및 API 연동 테스트 2장 (development environment and API test 2-2) 이번시간에는 추가로 ..

ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/zSKJLVQ67xQ 안녕하세요 개발로짜입니다 ^^기초편에서 우리가 ExtJS의 문법과 컴포넌트 이해를 배웠다면,이번강좌에서는 간단한 웹프로그램을 만들어보면서 서버와 API 통신까지 해보는 시간을 가져보려고 합니다. 우선 기초편에서는 Generate 할때, classic(ExtJS) / modern(Sencha Touch) 구조로 생성하였는데, 실전/응용편에서는 ExtJS 만을 다루기 위하여 classic 버전만으로 진행을 하기 위해 새로운 ExtJS 프로젝트를 Generate 해주도록 하겠습니다. ExtJS 를 Generate 하기 위한 임의의 디렉토리 생성예) D:\study라는 ..

ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/vUSf6LnEWOk 우리는 지금까지 기본 컴포넌트 생성법에 대하여 알아보았습니다. 간단하게 템플릿 구성을 한 후, 중앙영역에 우리가 미리 정의해놓은 컴포넌트를 변경해보는 시간을 가져보도록 합니다. app.js Code 위와 같이 코드에서 각 버튼 클릭이벤트 발생 시, handler 함수내에 정의한 뷰포트의 중앙영역을 selector를 이용하여 변수에 담은 후, 중앙영역내에 있는 컴포넌트들을 모두 removeAll을 이용하여 삭제합니다. 그런 다음. add 함수를 이용하여 우리가 미리 define 해놓은 컴포넌트를 삽입하여 줍니다. GridSample.js Code ButtonSamp..

ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/Gc2-7RRDcG4 데이터 바인딩 (Data Binding) ViewModel과 데이터 바인딩은 ExtJS 의 강력한 것 중 일부입니다.같이 사용하게 되면 데이터와 UI 간의 비즈니스 로직이 끊기지 않는 연결관계를 만들 수 있습니다. 바인딩이 가능한 CONFIG 설정은 bind 라는 속성내에 GET/SET을 지원하는 CONFIG 를 정의 후 value부분에 중괄호 - "{value}" 와같이 정의를 해주어야 합니다. MVVM 구조 이해하기 우리는 기존에 app.js 라는 파일내에 모든 컴포넌트 + 기능들을 기술하여 화면에 출력 하고 기능을 동작시켜 보았습니다. 하지만, 페이지가 늘어..

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/IBEcrYE0kgw 원형그래프 원형차트는 전체 데이터에 비례하는 데이터 조각을 보여줍니다.범주 전체를 빠르고 간단하게 비교할 수 있는 뛰어난 기능입니다. XY 축으로 이루어지지 않는 차트컴포넌트는 polar 컴포넌트를 이용 원형, 레이더, 계량기 관련 차트 컴포넌트를 이용할 경우에는 polar 차트를 이용합니다. polar 컴포넌트에서 axes가 필요없는 차트는 ? 원형그래프 레이더 및 계량기 그래프 관련해서는 axes config 이용이 되는 반면, 원형차트는 축에대한 기준이 필요 없으므로 axes config를 사용하지 않아도 가능합니다. 기존 원형그래프에서 도넛모..

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/FovgBmJqiD4 분산/분포 그래프 분산형 차트는 데이터를 점의 집합으로 표시하는데 유용한 그래프 컴포넌트입니다. 데이터들간의 상관관계를 찾는데 도움이 되며 여러 측정값을 표시하는데 적합한 차트입니다. 기존 차트와 다른점이 있다면? axes 모두 numeric!! 기본적으로 이전 강좌의 cartesian 관련 차트들은 axes config 속성이 category + numeric 의 조합으로 예를 들었습니다. 이번 분산차트의 경우는 xy 축의 값이 모두 numeric인 데이터를 표출하는데 유용한 차트입니다. series config에서 label 속성을 이용하느냐, ..

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/VzS036iTMAs 영역 그래프 영역차트는 선 사이의 영역을 구별하여 데이터를 표시시간이 지남에 따라 함계를 표시하여 경향을 측정하는데 주로 이용합니다 범례선언 위와같이 엑셀에서 그래프 출력 시, 하단에 빨간 네모부분을 범례라고 부릅니다.ExtJS 역시 , legend 라는 config를 이용해서 범례 표시가 가능합니다.대신, legend 속성만 설정한다고 정상적으로 출력이 되지 않고, 임의의 값으로 범례들이 출력됩니다.이 부분을 해결하기 위해서는, 각 series config object에 title 을 작성 해주어야 합니다.이 title 속성은 사람이 읽을수 있는 ..

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/QRT9FQQMipQ 선형 그래프 선형 그래프는 정보를 직성르 통해서 연결된 일련의 데이터 포인트로 표시합니다.꺽은 선형 그래프는 종종 일정기간 동안 데이터의 추세를 시각화하는데 사용되는 그래프입니다. 단건 표시하는 선형그래프 VS 단건 표시하는 막대그래프의 차이는? xtype이 cartesian이라는 것 그리그 axes config, series config 속성 모두 동일합니다.다만, 다른 config value값이 존재한다면, 그것은 바로 series config내의 type config 속성이 bar에서 line 으로 변경만 해주면 됩니다. 다중 표시하는 선형그래..

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/Nei54Mxaj-Y 누적 막대그래프 누적 그래프는 하나의 카테고리에 여러개의 범주가 겹쳐지는 차트를 의미일반적으로 기간 또는 값에대한 모든 카테고리의 합계를 시각적으로 나타냅니다. 지난 시간에는 단일값에 대한 예를 들어서 막대그래프를 표현 했다면, 오늘은 2개이상의 값들을 이용하여 그래프 출력을 해보도록 합니다. 이전 코드와 다른점이 있다면, series config 속성에 yField 값이 배열형으로 선언하고, label config 속성에는 field config 속성 역시, 배열로 선언하시면 됩니다. ※ 단, 쌓이는 값에 대한 순서는 yField의 정해주는 sto..

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/PKMBsJ_Z31E 차트컴포넌트 이용하기 차트컴포넌트는 별도의 패키지를 이용해야 사용이 가능합니다.app.json 에 requires 검색 후, "charts" 를 추가로 선언 후, 재빌드가 완료되면 차트컴포넌트 준비가 완료됐습니다. 차트컴포넌트 종류 ① Ext.chart.CartesianChart 클래스를 이용하며, xtype으로는 'cartesian' 이라고 선언을 해주면 됩니다. cartesian 컴포넌트의 경우, 보통 X,Y 축으로 구성되있는 막대,선,영역 그래프를 이용할때 사용되는 컴포넌트입니다. ② Ext.chart.PolarChart 클래스의 경우 xtyp..

ExtJS Ajax 클래스 사용법이해 관련 영상링크는 아래와 같습니다.YOUTUBE 채널 구독해주세요!! https://www.youtube.com/watch?v=I0-uPrtQEfk Ajax 클래스 Ajax 클래스는 Ext.data.Connection클래스의 싱글톤 인스턴스입니다.이 클래스는 서버측 코드 즉, API와 통신하는데 사용이 됩니다. jQuery의 Ajax 를 이용해보셨던 분들이시라면 쉽게 이해할만간 ExtJS 강좌입니다.왜냐하면, 문법이 상당히 유사하기 때문이죠. 기본문법은 다음과 같이 표현할 수 있겠습니다. 기본적으로 jQuery에 사용되는 구조랑 거의 90%이상 유사합니다. url : 내가 응답받은 API URL 을 작성해주시면 됩니다. method : 서버에 내가 보낼 paramete..

여러분들의 YOUTUBE 구독이 저에게 큰힘이 된답니다!! YOUTUBE 에서 "개발로짜"검색 또는 아래 채널구독 부탁드릴게요 ^^ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ CRUD 를위한 MySQL 테이블 생성 그리드 CRUD 진행에 앞서서 미리 말씀드리고 싶은내용은 이번 강좌는 단순하게 지금까지 우리가 배워온 그리드를 이용하여 가장 간단하게 조회부터 등록,수정,삭제를 알아보기 위해서 만들어보는 샘플예제입니다. 서버부분에 대한부분은 각자 사용하시는 언어들이 다양하므로 별도로 다루지 않습니다.다만, 위의 테이블 스크립트를 이용하여 ExtJS 영상강좌를 통하여 다뤄주시길 바라겠습니다. 문의는 YOUTUBE 댓글로 달아주시면 감사하겠습니다 !! s..

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 1. tbar (top-docked toolbar) 그리드 상단에 위치하는 툴바 2. lbar (left-docked toolbar) 그리드 좌측에 위치하는 툴바 3. rbar (right-docked toolbar) 그리드 우측에 위치하는 툴바 4. bbar (bottom-docked toolbar) 그리드 하단에 위치하는 툴바 5. fbar (footer toolbar) bbar와 동일한 위치에 존재하는 툴바 footer UI가 적용됨 꼭 그리드에만 존재하는 속성은 아닙니다.하지만, 보통 고정적인 툴바의 경우, 대부분 그..

▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 이전 시간에는 그리드 페이징을 위하여 페이징툴바 컴포넌트에 plugins 속성을 지정하여 페이징 컴포넌트의 종류를 변경해 보았습니다.오늘은 엑셀의 시트처럼 셀을 변경할수 있는 에디팅 플러그인들을 소개해보고자 합니다. 에디팅 플러그인 종류 및 선언 위치 그리드 컴포넌트 속성에 아래와 같이 선언을 해줍니다. // 각각의 셀을 수정할 수 있는 에디트 플러그인plugins : 'cellediting' or // 각 로우 전체를 한번에 수정 할 수 있는 에디트 플러그인plugins : 'rowediting' 원하는 에디트 플러그인 설..