ext-js grid 그리기

    <script type="text/javascript">
    //공백제거함수
    function trim(str) {
        if(str != ''){
            var whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
            for (var i = 0; i < str.length; i++) {
                if (whitespace.indexOf(str.charAt(i)) === -1) {
                    str = str.substring(i);
                    break;
                }
            }
            for (i = str.length - 1; i >= 0; i--) {
                if (whitespace.indexOf(str.charAt(i)) === -1) {
                    str = str.substring(0, i + 1);
                    break;
                }
            }
            return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
        }else{
            return '';
        }
    }
    </script>
    <script type="text/javascript">

        // GridPanel 사용 방법 안내
        //------------------------------------------
        // 1.GridPanel용 변수선언
        //   - datastore용 변수선언
        //   - XmlReader용 변수선언
        var ds1;
        var reader1;
        var grid1;

        // paging
        var pageSize = 14;

        // ExtJS 진입 함수
        Ext.onReady(function(){
            // QuickTips 초기화
            Ext.QuickTips.init();

            function renderLink1(value, p, record) {
                return String.format(
                    '<input type="checkbox" name="ROWSEQ" id="ROWSEQ" style="border-style:none" value="{0}"><input type="checkbox" name="ROWNM" id="ROWNM" style="border-style:none;display:none" value="{1}">',
                    record.data.CST_COMP_CD,record.data.SVC_NM);
            }

            // 2.XmlReader 생성
            //   XML 결과를 읽어들일 Reader를 생성합니다.
            reader1 = new Ext.data.XmlReader({
                    // 결과 레코드 => 'Row'
                    //totalRecords: 'REQ_TOTAL',
                    record: 'RESULT/RowList/Row',
                    totalRecords: 'TOTAL'
                },[
                    // XML 결과필드를 매핑
                    {name: 'ROWSEQ', mapping: 'ROWSEQ'    },
                    {name: 'CST_COMP_NM', mapping: 'CST_COMP_NM'    },
                    {name: 'CST_COMP_CD', mapping: 'CST_COMP_CD'    },
                    {name: 'SVC_NM'      , mapping: 'SVC_NM'          },
                    {name: 'SVC_OWN_ID'  , mapping: 'SVC_OWN_ID'      },
                    {name: 'PER_NM', mapping: 'PER_NM'    },
                    {name: 'FILE_ID', mapping: 'FILE_ID'    },
                    {name: 'WGT', mapping: 'WGT'    },
                    {name: 'SVC_DESC', mapping: 'SVC_DESC'    }
                ]
            );

            // 3.DataStore 생성
            //   DataStore는 지정된 프락시(url=서비스경로,params=파라미터)와
            //   앞에서 정의한 XmlReader를 사용하여 데이터를 저장하는 RecordSet과 같은 객체입니다.
            ds1 = new Ext.data.Store({
                url: 'TEST.jsp', // 호출대상서비스
                params: '', // 전달파라미터->형태(A:1,B:2)
                reader: reader1 // 사용할 XmlReader
            });

            // 4.GridPanel 생성
            //   앞에서 정의한 datastore 의 데이터를 표시할 Grid 를 생성합니다.
            //   이때 Grid 의 각 열을 정의하는 Column을 지정합니다.

            //var sm = new Ext.grid1.CheckboxSelectionModel();
            var ch = "<input type='checkbox' name='ROW_SEQ_HEADER' id='ROW_SEQ_HEADER' onclick='javascripｔ:funAllChk();' style='border-style:none'>";
            grid1 = new DBCNI.itsmGridPanel({
                store: ds1, // datastore
                columns: [
                    {header: ch,width: 40, menuDisabled: true, renderer: renderLink1},
                    {header: "관계사",width: 150, dataIndex: 'CST_COMP_NM', align: 'center',sortable: true},
                    {header: "서비스",width: 150, dataIndex: 'SVC_NM',align: 'center',sortable: true},
                    {header: "고객책임자",width: 100, dataIndex: 'PER_NM',align: 'center',sortable: true},
                    {header: "가중치",width: 80, dataIndex: 'WGT',align: 'center',sortable: true},
                    {header: "설명",width: 230, dataIndex: 'SVC_DESC',sortable: true}
                ],
                listeners: {
                    'rowdblclick': function(grid, rowIndex, e){
                        var record = grid1.getStore().getAt(rowIndex);  // Get the Record
                        var rowseq = record.get("ROWSEQ");//
//                        var svc_cd = record.get("SVC_CD");//
                        var svc_nm = record.get("SVC_NM");//
                        var comp_cd = record.get("CST_COMP_CD");//
                        var file_id = record.get("FILE_ID");
            cfnShowScrollPopup(
                "TEST.JSP?MODE=EDIT&CST_COMP_CD=" + comp_cd
//                    + "&WRK_DT=" + WRK_DT
                    + "&SVC_NM=" + svc_nm
                 + "&FILE_ID=" + file_id
                ,800, 500,'winSvc');
                    }
                },
                renderTo:'divGrid1', // HTML body 에서 Grid를 적용할 객체의 id
                width:790, // Grid 넓이
                height:420, // Grid 높이
                bbar: new DBCNI.itsmPagingToolbar({
                pageSize: pageSize,
                store: ds1,
                displayInfo: true,
                displayMsg: '전체 {2}건 중 {0} - {1}',
                emptyMsg: "표시할 항목이 없습니다.",
                onClick: function(which){
//                    document.getElementById("FILE_NM").value = trim(document.getElementById("FILE_NM").value);
                    var store = this.store;
                    switch(which) {
                        case "first":
                            ds1.on('beforeload', function() {
                                ds1.baseParams = {
                                };
                            });
                            this.doLoad(0);
                            break;
                        case "prev":
                            ds1.on('beforeload', function() {
                                ds1.baseParams = {
                                };
                            });
                            this.doLoad(Math.max(0, this.cursor-this.pageSize));
                            break;
                        case "next":
                            ds1.on('beforeload', function() {
                                ds1.baseParams = {
                                };
                            });
                            this.doLoad(this.cursor+this.pageSize);
                            break;
                        case "last":
                            ds1.on('beforeload', function() {
                                ds1.baseParams = {
                                };
                            });
                            var total = store.getTotalCount();
                            var extra = total % this.pageSize;
                            var lastStart = extra ? (total - extra) : total-this.pageSize;
                            this.doLoad(lastStart);
                            break;
                        case "refresh":
                            ds1.on('beforeload', function() {
                                ds1.baseParams = {

                                };
                            });
                            this.doLoad(this.cursor);
                            break;
                        }
                    }
                })
            });

            ds1.on('beforeload', function() {
                ds1.baseParams = {//파라메터를 세팅합니다. A:"abc",B:1

 //파라메터를 저래 세팅하면 우리가 알고 있는 파라메터 전송형태인 .jsp?A='abc'&B=1 요런식으로전송
                };
            });

            grid1.render();

            // 5.데이터로드
            //ds1.load();
            doSearch(true); //데이터를 로드합니다.

        });

 

//check 박스의 선택에 따라 아이템 전체 선택및 해제

        function funAllChk(){
            var chkboxHeader = document.getElementsByName("ROW_SEQ_HEADER");
            var chkboxObj = document.getElementsByName("ROWSEQ");
            var chkboxObj2 = document.getElementsByName("ROWNM");

            if(chkboxHeader[0].checked){
                for(j = 0; j < chkboxObj.length; j++){
                    chkboxObj[j].checked = true;
     chkboxObj2[j].checked = true;

                }
            }else{
                for(k = 0; k < chkboxObj.length; k++){
                    chkboxObj[k].checked = false;
     chkboxObj2[k].checked = false;
                }
            }
        }

        //삭제

     // 선택된 아이템을 체킹여부에 따라서 콤마(,)로 구분해서 폼의 히든필드에 담아 둡니다.
        function doDel() {
            //AUTH_SEQ : screen_no

            var chkboxObj = document.getElementsByName("ROWSEQ");//관계사코드
            var chkboxObj2 = document.getElementsByName("ROWNM"); //서비스명
            var flag = false;
            var str = "";//관계사코드
            var str2 ="";//서비스명
            for(var i = 0; i < chkboxObj.length; i++){
                if(chkboxObj[i].checked){
                    flag = true;
                    if(str == '')
                    {
                      str = chkboxObj[i].value;
                      str2 = chkboxObj2[i].value;
                    }
                    else
                    {
                     str += "," + chkboxObj[i].value;
                     str2 += "," + chkboxObj2[i].value;
                    }
                }
            }

            if(flag) {
                document.getElementById("CST_COMP_CD").value = str;//히든폼필드

                document.getElementById("SVC_NM").value = str2;//히든폼필드 - 사용자가 직접폼을 만들어 세팅하세용
                cfnAlert("삭제하시겠습니까?","","question","yesno","funDelete");//요건 따로 함수 만든거에용 extjs에서 찾을려 애쓰지 마세용~
            } else {
                cfnAlert("삭제할 대상이 없습니다.");
            }
        }

 

 

        //삭제처리함수 - 

        function funDelete(btn) {
            if(btn == 'yes') {

                var param = 'CST_COMP_CD=' + document.getElementById("CST_COMP_CD").value
                       + '&SVC_NM = '+ document.getElementById("SVC_NM").value;

                Ext.Ajax.request({
                    url : 'DELETE.jsp',
                    params : param,
                    method: 'POST',
                    success: function ( result, request ) {
                        var response = result.responseXML;
                        var success = cfnGetSvcSummary(response,"Success");
                        var message = cfnGetSvcSummary(response,"Message");
                        var resultMsg = cfnGetSvcMaster(response,"ResultMsg");
                        var resultRow = cfnGetSvcMaster(response,"ResultRow");
                        if (success == 'true' && resultRow > 0) {
                            //cfnAlert(resultMsg);
                            //callback없이 바로 grid list 조회
                            //searchAfterTrans(resultRow);
                            doSearch(true);
                        } else {
                            cfnAlert(resultMsg);
                        }
                    },
                    failure: function ( result, request) {
                        cfnAlert(result.responseText);
                    }
                });
            }
        }

 

=========================================================================

위 소스는 지금 내가 개발중인 소스.... ㅋ jquery 만 쓰다가 ext-js 를 첨 접해봤는데.. 그리드 하나는 진짜 막강한듯.. ㅋㅋㅋ

 

위 소스는 그리드에 paging 및 체크박스 custom renderer를 이용해서 컬럼값을 사용자 임의로 변경 할 수있도록 해 놓은 소스이다.. 물론, 모든 소스를 올리진 않았고, grid를 그리기 위한 기본적인 형태와 선택 아이템을 삭제하는 과정과 paging(다음/이전)등을 보여줍니다. 물론 페이징은 비하인드 java 코드에서 아이템갯수와 아이템을 쿼리에서 처리해 주어야 합니다.냐하~~ 궁금하시면 리플달면 그것도 올려드림~