자 이번에는 탭패널에 대하여 설명을 하고자 한다.
탭패널의 장점은 탭별로 구분을 하여 역할을 나누는데 효율적이다.
이번에 설명할 내용은 두개의 탭에 지금까지 배워온 내용중 일부를 삽입하여
각각의 탭에 출력하도록 한다.
ExtJS를 실행할 세팅이 안되있다면 다음링크를 따라서 준비하자
2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]
첫번째 탭에는 6장에서 샘플링한 grid memory 타입을 출력할것이고
2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!
두번째 탭에는 9장 기본 폼들을 출력할 것이다.
2014/06/24 - [자바스크립트이야기/Ext JS] - [ExtJS강좌9] 폼을 화면에 출력하기 (1)
동적으로 추가되는 탭패널에 대해서는 다음장에 설명하도록 하겠다.
1. 탭패널에 대한 기본구조는 다음과 같다.
Ext.create('Ext.tab.Panel',{ renderTo : Ext.getBody(), items : [ //각각의 탭을 넣어줄 영역 ] })
items json 배열속성안에다 각각 기술할것인대, formpanel과 grid memory 에대한 코드가
워낙 길다...
그러니 각각의 소스들을 가져와 변수에 담을것이다.
단, 각 코드들의 renderTo : Ext.getBody() << 요놈은 지우고 변수에 담자.
1. 그리드 패널에 대한 소스는 var grid 변수에 담아주고
* 탭패널에 대한 타이틀을 정의해주기 위하여 Ext.grid.Panel 속성중, title : '그리드샘플'
속성을 추가하자
이전글에서는 title 속성은 사용하지 않았음
2. form패널에 대한 소스는 var form 변수에 담아주자
(그리드,폼패널 둘다 renderTo 속성을 빼도록 하자)
1,2 번에 대한 코드는 해당 내용에서는 제외하도록 하겠다.
1,2번에 대한 코드를 각각의 변수에 대입하였다면
tabpanel -> items json 배열에 넣어주자
{ xtype : grid }, { xtype : form }
위의 json객체들을 items 속성에 넣게 되면 다음 화면처럼 출력이 되는것을 확인 할 수 있을것이다.
1. 첫번째 탭화면
2. 두번째 탭화면
와우 잘나온다 ㅎㅎㅎ
ExtJS MVC 패턴으로 하면 조금더 심플해지긴 하나....
우선은 컴포넌트 출력이해가 먼저라고 생각하므로 MVC에 대한 내용은 컴포넌트 강좌를
모두 마친후에 진행 하도록 하겠음
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
[ExtJS강좌 17]메뉴바(menu) - 메뉴바 생성하기 [create menu bar] (0) | 2014.06.30 |
---|---|
[ExtJS강좌 16]탭패널(tabpanel) - 두번째 편 - 동적탭 추가하기 (0) | 2014.06.30 |
[ExtJS강좌 14]트리패널(treepanel) - 두번째 편 ajax type으로 자식노드 뿌리기 (8) | 2014.06.30 |
[ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!! (0) | 2014.06.30 |
[ExtJS강좌 12]그리드패널 - 세번째 편 ajax 그리드 페이징사용하기~ (21) | 2014.06.30 |
기존 프로젝트 진행하면서 알게된 버그인대...
ExtJS4에서는 일어나지 않은 문제점이 발생이 되었다
버그는 TreePanel에서 노드를 확장할때 또는 접을때 한번만 이벤트가 발생하는 문제점이다.
이럴때는 treepanel의 속성중 animate : false 를 지정해주면 해결이 되었다.
아마 애니메이션 문제로 생긴 버그 인듯 하다...
뭐 100% 생기는 버그는 아니다.
만약 본인이 작성한 내용처럼 expand 또는 collapse 이벤트가 한번만 동작할때
사용해볼만한 속성이라는 것이다...
이 버그로 하루를 버렸다
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
컴포넌트들 renderTo : Ext.getBody()할때 IE에서 화면 깨짐 현상 해결법 (0) | 2014.07.08 |
---|---|
ExtJS5 store -> proxy 에서 root 속성이 적용 안될경우 -> rootProperty로 (0) | 2014.07.07 |
지난시간에는 memory타입의 tree를 출력하여봤다!!
ajax 타입이라고 해봤자 proxy설정해주고 서버측으로 부터 json객체를 얻어오기면 하면
memory 타입이랑 변하는건 하나두 없음....
최상단=root 이고, 자식=children이란것은 변함이 없다.
root 속성만 정의하고 ajax로 children을 뽑아보자
1. ExtJS5 세팅
2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]
2. ExtJS treepanel memory type 샘플예제
2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!!
자바 기준으로 설명할것이라,
spring을 이용하시는 분들은 잭슨라이브러리??로 json을 파싱하시면 될것이고
일반 jsp로 하신다면 json-simple jar 라이브러리를 등록해주자
PHP는 자체제공하는 json함수를 사용하자
보통은 트리별로 ajax 호출할때는 선택된 노드의 id를 가지고 db에서 조건을 주어 select를 하여
자식노드를 json으로 파싱하여 클라이언트로 던진다.
이전 포스팅의 root속성중 children key값은 삭제하고 root의 text/id/enpanded속성만 남겨놓자
그리고 children 속성을 json으로 받기위한 proxy 설정을 잡아주자
그러면 변경된 treepanel의 코드는 다음과 같다.
Ext.create('Ext.tree.Panel',{ renderTo : Ext.getBody(), store : new Ext.data.TreeStore({ root : { text : '최상단 부모노드', id : 1, expanded : false } proxy: { type: 'ajax', url : '/treeresult.jsp', reader: { type: 'json', root: 'children' } }, }) })
위의 코드로 root노드를 클릭하게 되면 서버에서는 클릭된 노드의 값을 받아야 한다
request값은 root 속성의 id값이 되면 서버에서 받는 name은 "node"라고 받을 수있다.
즉, 서버에서
java기준 : request.getParameter("node") 라고 하게 되면 서버에서는
rootNode의 id값인 1을 받을 수 있다.
그럼 서버에서 rootNode 클릭시 children json객체를 만드는 소스는 다음과 같다.
String node = request.getParameter("node"); JSONObject jsonObj = new JSONObject(); JSONObject jsonObj2 = null; JSONArray jsonArr= new JSONArray(); //node는 서버에서받은 root의 id값이다. if(node.equals("1")) { //임의의 자식노드 json객체 생성후 json array에 답는다. for(int i=0; i<5;i++) { jsonObj2 = new JSONObject(); jsonObj2.put("text","자식노드_"+i); jsonObj2.put("leaf",true); jsonArr.add(jsonObj2); } //꼭 children이 아니여도 된다. children으로 준 이유는 proxy -> reader -> root값을 children으로 주었기때문 //proxy -> reader -> root 값을 하단 key값과 맞춰만 주면 된다. jsonObj.put("children", jsonArr); } PrintWriter pw = response.getWriter(); System.out.println(jsonObj.toString()); pw.print(jsonObj); pw.flush(); pw.close();
서버에서 넘어온 json객체구조는 다음과 같다
{ "children" : [{ "text" : "자식노드_0", "leaf" : true }, { "text" : "자식노드_1", "leaf" : true }, { "text" : "자식노드_2", "leaf" : true }, { "text" : "자식노드_3", "leaf" : true }, { "text" : "자식노드_4", "leaf" : true }] }
위에 구조대로 진행만 해주게 되면 db조회후 자식노드들을 서버에서 뽑아 올 수 있을것이다.
클릭할때마다 서버에서 data를 가져오는것은 아니고 한번만 통신이 이루어진다.
children json속성중 text/leaf만 뽑았는데
작업중인 로직별로 expanded가 붙을수도있고
leaf가 false가 될수도 있고
id가 붙을수도 있다.
나머지는 본인 입맛에 알맞게 적용하시길...
출력화면은 다음과 같다.
treepanel강좌는 여기로 끝~~~
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
[ExtJS강좌 16]탭패널(tabpanel) - 두번째 편 - 동적탭 추가하기 (0) | 2014.06.30 |
---|---|
[ExtJS강좌 15]탭패널(tabpanel) - 첫번째 편 - 탭 출력하기 (0) | 2014.06.30 |
[ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!! (0) | 2014.06.30 |
[ExtJS강좌 12]그리드패널 - 세번째 편 ajax 그리드 페이징사용하기~ (21) | 2014.06.30 |
[ExtJS강좌11] 폼을 화면에 출력하기 (2) - 콤보박스2 ajax (0) | 2014.06.24 |
주말에 너무 쉬어서 오늘도 연속으로 포스팅을 하도록 하겠음.
이번에는 트리패널에 대하여 설명하도록 하겠다.
그리드 링크는 별도로 안걸고 세팅에 대한 링크만 걸도록 하겠음
세팅안되신분은 다음 페이지가서 extjs에 대한 세팅을 준비하시고 읽으시길..
2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]
뭐 사실 GridPanel이랑 별반 차이는 없다..
다만 차이가 있다면 store의 타입, json data의 구조정도일듯??
그리드에서는 Ext.data.Store
를 사용하였다면
트리에서는 Ext.data.TreeStore
로 변경이 된다.
그리드도 memory타입으로 스타트를 끊을것이다~~
memory타입으로 시작하려는 이유는 모든 ExtJS의 구조는 json구조가 기본이 되기 때문이다..
뭐 xml로 받을수도 있는거고 jsonp등등 여러타입으로 받을수 있겠지만 본인은 json이 편함
treeStore에서 필수로 알아야 할 속성은
expanded와 leaf이다
expanded : 자동으로 자식노드를 펼침에 대한 유무를 의미한다
true일 경우 : 다음 depth 하위노드를 자동으로 open
false일 경우 : 본인을 open하여야 다음 depth의 하위노드를 open
leaf : 해당 구조가 최하단인지를 의미
true일 경우 : +/- 의 아이콘이 보이지 않으며 더이상 하위노드가 없음을 의미한다.
false일 경우 : +/-의 아이콘을 보여주며 하위노드 존재유무랑 상관없음 하위노드 없을경우
그냥 펼침이 되지만 실질적인 하위노드는 존재하지 않음
그리고 최상단 부모 노드를 default로 표출해야하므로 treeStore에 root 속성을 기술하면 되겠다.
원래는 treestore에 proxy를 설정하고 type을 memory로 해주어도 무관하나
본인은 그냥 root속성만으로 트리구조를 표출하도록 하겠다.
root : { text : '최상단 부모노드', expanded : true, children: [ { text:'자식노드(o)', expanded: false, children: [ { text:'자식노드(o)2', expanded: true, children:[ { text:'최하단자식1', leaf:true }, { text:'최하단자식2', leaf:true } ] } ] }, { text:'자식노드(x)', leaf : true } ] }
treeStore의 root 속성에 들어갈 내용이다.
다음에 설명할 ajax type의 구조도 위 구조에서 크게 벗어나지 않을것이다.
다만 분리를 별도로 할뿐..
memory type은 샘플링으로도 충분할거라 생각한다.
Ext.onReady(function(){ //treepanel 생성 Ext.create('Ext.tree.Panel',{ //body태그내에 생성한다. renderTo : Ext.getBody(), //저장소는 treestore을 이용 store : new Ext.data.TreeStore({ //최상단 rootNode root : { // text: 노드의 제목 text : '최상단 부모노드', // 자동표출여부 expanded : true, // 자식노드 children: [ //자식노드 첫번째 { text:'자식노드(o)', //자동표출여부 expanded: false, //자식node children: [ //자식노드 { text:'자식노드(o)2', //더이상의 하위노드는 없다. leaf : true } ] }, //자식노드 두번째 { text:'자식노드(x)', //더이상의 하위 노드는 없다 leaf : true } ] } }) }) })
구현된 화면이다.
한번 expanded속성/text속성/leaf속성들을 변경해보고 children속성도 붙여보면서 test하면서
이해를 해보도록 권유한다.
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
[ExtJS강좌 15]탭패널(tabpanel) - 첫번째 편 - 탭 출력하기 (0) | 2014.06.30 |
---|---|
[ExtJS강좌 14]트리패널(treepanel) - 두번째 편 ajax type으로 자식노드 뿌리기 (8) | 2014.06.30 |
[ExtJS강좌 12]그리드패널 - 세번째 편 ajax 그리드 페이징사용하기~ (21) | 2014.06.30 |
[ExtJS강좌11] 폼을 화면에 출력하기 (2) - 콤보박스2 ajax (0) | 2014.06.24 |
[ExtJS강좌10] 폼을 화면에 출력하기 (2) - 콤보박스1 (2) | 2014.06.24 |
원래는 ExtJS 게시판 샘플링때 글을 올리려 하였으나,
'한줄기빛이내려왔다' 님께서 페이징 관련 요청해주셔서 올리게 되었다.
* 포스팅에 관심가져주셔서 감사합니다 ^^ㅋ
CRUD를 작성하기에는 분량이 많고 접근하는 방법도 다양하여서 오늘은 그리드에서 페이징하는
방법을 소개하려 한다!
이번시간 역시 심플하게 진행을 하고자 전에 설명했던 그리드에 대한 모든 내용을 이해한 후 진행
하길 희망한다.
1. 개발세팅에 필요한 내용
2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]
2. GridPanel에 대한 기본세팅
2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!
3. GridPanel에 대한 Ajax 처리
2014/06/23 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!
해당 3번째까지 모두 진행이 완료되었다는 가정하에~ 진행 하도록 해보자!!
기본적으로 이글을 읽는 대부분의 개발자분들 혹은 ExtJS로 개발을 하시는 분들은 본인들이 가지고 있는 페이징 기법들이 있을것이다.
jsp 페이징 , Spring paging, Struts2 paging, PHP paging 등등...
서버단에 대한 로직 설명은 별도로 하지 않을것이다..
본인이 편한 페이징 처리로 작업을 진행하자..
자~ 그럼 저번시간에 이은 소스에 추가적으로 페이징처리를 해보자!!
부족하지만, 내 포스팅을 읽어주시는 분들이 계시고 방명록및 댓글에 글을 남겨주시는 분들을 위하여 열심히 진행을 해보자 ㅎㅎㅎ
기본적으로 페이징에 필요한 임시 테이블 하나를 만들어보자
MySQL기준으로 테이블을 생성해보도록 하겠음..
DB는 알아서들 하시고...
본인이 테스트를 위해 만든 테이블은 이전에 임시로 AJAX 호출한 컬럼 2개만 생성하면 만들어 보았다.
CREATE TABLE grid_sample( title1 VARCHAR(100), title2 VARCHAR(100) )
뭐 없어보이긴 하나.. 이전 시간 이어서 진행하는 설명이 제일 깔끔한거 같음!
insert할 임의의 데이터
INSERT INTO grid_sample VALUES('타이틀1','타이틀1'); INSERT INTO grid_sample VALUES('타이틀2','타이틀2'); INSERT INTO grid_sample VALUES('타이틀3','타이틀3'); INSERT INTO grid_sample VALUES('타이틀4','타이틀4'); INSERT INTO grid_sample VALUES('타이틀5','타이틀5'); INSERT INTO grid_sample VALUES('타이틀6','타이틀6'); INSERT INTO grid_sample VALUES('타이틀7','타이틀7'); INSERT INTO grid_sample VALUES('타이틀8','타이틀8'); INSERT INTO grid_sample VALUES('타이틀9','타이틀9'); INSERT INTO grid_sample VALUES('타이틀10','타이틀10');
우선 10개만 넣어보자
[현재 리팩토링중인 GkSQL로 데이터 뽑은 샘플화면]
다음같은 데이터 컬럼 2개의 데이터 10개가 정상적으로 들어갔다면 이제 실질적인 소스 부분을
진행해보도록 하자.
페이징은 크게 검색을 제외하면 대부분 2가지가 필요하다
1. 한페이지에 몇개의 데이터를 뽑을지
2. 1페이지/2페이지 클릭할때마다의 페이지 넘버값(1페이지,2페이지,3페이지....)
Ext.data.Store에서 속성값 하나가 필요하다
뭐 없어도 되지만 ...
바로 pageSize 라는 속성값인대
이 속성을 빼고 작업을 하면 한페이지당 default 25개의 리스트를 뿌려준다.
우리는 데이터가 꼴랑 10개뿐이므로... 한페이지당 3개정도로 뿌리도록 해보자
pageSize : 3
이라고 추가 지정해주었다.
그리도 그리드 페이징을 하려면 pagingtoolbar 라는 xtype이 필요한대 여기서도 같은 store를
사용할 것이므로 gridpanel에 store속성에 ext.create 해주었던 store 객체를 변수로 별도로 빼자
var str = Ext.create('Ext.data.Store',{ fields : [ { name : 'title1' }, { name : 'title2' } ], autoLoad: true, pageSize: 3, proxy: { type: 'ajax', api: { read: '/list.jsp' }, reader: { type: 'json', //있어도 그만 없어도그만 successProperty: 'success', root: 'items', totalProperty: 'totalCount' } } })
저렇게 뺏다면 다음은 페이징툴바를 생성해보도록 하자
gridpanel에 dockedItems라는 것이 있는데 extjs demo에서 쓰인다.
dockedItems 배열속성에 페이징툴바를 넣어준다.
dockedItems : [ { xtype : 'pagingtoolbar', dock : 'bottom', store : str, displayInfo : true, displayMsg: '현재데이터수 : {0} - {1} / 총 데이터수 : {2}', emptyMsg: "데이터가 존재하지 않습니다." } ]
위와같이 주면 페이징 툴바가 생성이 된다.
위와같이 작성을 하였다면 그리드 패널에 대한 코드는 다음과 같다.
Ext.create('Ext.grid.Panel',{ renderTo : Ext.getBody(), columns : [ { text : '제목1', flex : 1, dataIndex : 'title1' }, { text : '제목2', flex : 1, dataIndex : 'title2' } ], store : str, dockedItems : [ { //페이징 툴바 xtype : 'pagingtoolbar', //그리드로부터 툴바생성위치 dock : 'bottom', //store store : str, //정보 보여주기 false일 경우 하단속성은 필요없음 displayInfo : true, //보여주기 메시지(데이터 존재할때) displayMsg: '현재데이터수 : {0} - {1} / 총 데이터수 : {2}', //데이터 존재하지 않을경우 emptyMsg: "데이터가 존재하지 않습니다." } ] });
여기에서 서버에서 받는 파라미터명은 다음과 같다
start -> 시작번호 (현재 3개씩 뿌려지므로 1페이지 : 0 / 2페이지 : 3/ 3페이지 6 으로 출력)
limit -> 몇개를 뿌려줄지 (store의 pageSize속성에 정의한 값을 서버에서는 limit로 받는다)
java에서는 request.getParameter("start") / request.getParameter("limit")
로받으면 각각의 값을 받을 수 있을 것이다.
php경우는 $.GET, $_POST 형식으로 받아주면 될것이다,
혹시 몰라 총카운트 구하는 샘플쿼리랑 list출력하는 샘플링 쿼리임
sql query
--총 카운트 구하는 쿼리 select count(*) cnt from grid_sample --리스트 뽑는 쿼리 select title1, title2 from grid_sample limit "+Integer.parseInt(request.getParameter("start"))+" , "+Integer.parseInt(request.getParameter("limit"))
그렇다면 JSON result값으로 넘겨줘야 하는것은 다음과 같다.
{ "items":[ {"title1":"타이틀1","title2":"타이틀1"} ,{"title1":"타이틀2","title2":"타이틀2"} ,{"title1":"타이틀3","title2":"타이틀3"} ] ,"totalCount":10 }
success는 없어도 그만이고... return 해주는 json 데이터는 다음과 같이만 넘겨주면 잘 동작한다.
store에서 지정해준
root key값의 value = 'items'라고 주었었다.
이부분이 그리드 한페이지에 뿌려줄 데이터이고
totalProperty가 그리드 내에서 자체적으로 페이징을 계산하기 위한 총카운트 속성값 같다..
(이거는 서버측에서 totalcount 때린 데이터를 json으로 넘겨주면 될것임!!)
우와~ 오늘은 엄청 길게 썻다 ;;;
뭐 아무튼 오늘시간은 이정도면 어느정도 이해들 하실거라 믿는다...
위의 모든 내용을 요약하자면 다음과 같다.
1. 그리드 페이징은 gridpanel에 pagingtoolbar라는 xtype이 필요하다.
2. pagingtoolbar의 store = gridpanel의 store처럼 같아야함
3. store proxy에서 reader로 받는 json 명칭중 root의 value값과 totalProperty의 value값을
가진 json을 서버에서 가공하여 넘겨주어야 한다.
이거처럼만 작성이 완료되었다면 다음 화면처럼 잘 나올것이다!!
한페이지씩 넘기면서 화면을 봐보자 -_-ㅋ
GkSQL도 리팩토링기간이라 글올릴 시간이 적은거 같다 후아후아
도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!
[ExtJS강좌 14]트리패널(treepanel) - 두번째 편 ajax type으로 자식노드 뿌리기 (8) | 2014.06.30 |
---|---|
[ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!! (0) | 2014.06.30 |
[ExtJS강좌11] 폼을 화면에 출력하기 (2) - 콤보박스2 ajax (0) | 2014.06.24 |
[ExtJS강좌10] 폼을 화면에 출력하기 (2) - 콤보박스1 (2) | 2014.06.24 |
[ExtJS강좌9] 폼을 화면에 출력하기 (1) (6) | 2014.06.24 |