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' 원하는 에디트 플러그인 설..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 페이징을 위한 서버 및 기본적인 ExtJS 관련부분 설명 - Server 1. 기본적으로 "start"와 "limit" 라는 키를 이용하여 서버에 페이징 관련 값을 전달 ※ MySQL/MariaDB의 경우는 받아서 LIMIT 부분에 정의만 하면 되지만, MSSQL 또는 Oracle등 기타 DBMS에서 페이징 쿼리 작성 시, 별도로 계산하여 페이징 처리를 해주어야함 2. 일반적인 게시판 페이징과 동일하게 특정 리스트에 대한 전체카운트 쿼리 1개와 start,limit로 특정 페이지만 출력한 리스트쿼리 1개 이렇게해서 2개의 값..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ Tree Panel 적용 후, 트리컴포넌트가 우측에 위치한다면? 생성 된 프로젝트 내부에 보게 되면, app.json 파일이라는 것이 존재합니다.상세로 들어가신 후, "ext-all-rtl-debug.js" 문구를 검색 후,rtl 을 제외한 "ext-all-debug.js" 로 파일명을 변경해 주도록 합니다.그럼, 정상적으로 좌측에 트리패널이 위치하게 될겁니다. 트리패널이란 ? 트리구조의 데이터를 UI 구조로 제공하는 컴포넌트 트리패널은 store config 속성이 필수로 되어있으므로 tree panel 선언 시, stor..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 데이터스토어의 Proxy config 속성을 이용한 Ajax 통신 기존에 우리는 데이터 스토어에서 data 속성으로 정의되어있는 데이터 목록을 콤보박스 또는 그리드에 출력을 해보았습니다. 하지만, data 속성을 사용하지 않고 이번 강좌에서는 proxy config 를 이용하여 원격 페이지로부터 데이터를 불러오는 연습을 해볼겁니다. ExtJS 개발은 App 개발처럼 화면만 개발하면 된다! 안드로이드 또는 아이폰과 같은 모바일 개발을 할 경우, 서버 개발자가 API 개발을 하고, 앱개발자는 화면개발과 서버로부터 응답받은 API..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 그리드패널(Ext.grid.Panel) 그리드란, 화면상의 많은양의 데이터를 시각화하는 훌륭한 방법 그리드를 이용하면 쉽게 정렬 및, 데이터를 출력하고 많은 양의 데이터를 필터링을 할 수 있음 table 태그가 기본바탕이며, 각각의 table, tr, td에 엘리먼트들이 감싸져 있고 클래스들을 정의함 그리드 + 데이터스토어 관계 이전시간 콤보박스의 경우 ,콤보박스를 데이터스토어와 연결을 시켜주고자 했을 때, displayField와 valueField를 이용했습니다. 기억이 안나신다면, 이전 강좌를 다시 수강해주세요. 201..