Ext-js paging
From JCFWiKi
목차 |
[편집] Paging 처리
Ext.jcf.Grid 를 이용하여 페이징된 그리드를 처리한다.
- 생성할 파일
- comCiMng.jsp : 전체화면을 구성하는 jsp
- comCiMng.js : 그리드와 store 핸들링을 처리하는 js 파일
- 그 외 사용할 공통 스크립트 파일
- /js/ext/adapter/ext/ext-base.js
- /js/ext/ext-all.js
- /js/Ext.jcf.Common.js
- /js/Ext.jcf.Form.js
- /js/Ext.jcf.FormType.js
- /js/Ext.jcf.Grid.js
- /js/common_grid.js
[편집] js 파일 등록
먼저 JSP 파일에 필요한 js 파일을 사용할수 있도록 추가한다.
<script type="text/javascript" src="../../js/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../js/ext/ext-all.js"></script> <script type="text/javascript" src="../../js/gmdat-common.js"></script> <script type="text/javascript" src="../../js/Ext.jcf.Common.js"></script> <script type="text/javascript" src="../../js/Ext.jcf.Form.js"></script> <script type="text/javascript" src="../../js/Ext.jcf.FormType.js"></script> <script type="text/javascript" src="../../js/Ext.jcf.Grid.js"></script> <script type="text/javascript" src="../../js/common_grid.js"></script>
[편집] 검색필드 만들기 : 입력값 정의
위 그림처럼 검색하기 위한 검색 항목이 있는데, 다음과 같이 지정한다.
[편집] JSP
<!-- 검색 영역 --> <table id="s_table_header_1" border="1" cellspacing="0" cellpadding="0" bordercolordark="white" bordercolorlight="#C0C0C0" width="100%"> <tr> <td>CI분류명</td> <td colspan=3><input id="shCiClassName"></td> <td>분류레벨</td> <td><input id="shCiClassLevel"></td> <td>소속사</td> <td><input id="shCompCode"></td> </tr> <tr> <td>대분류</td> <td><input id="shCiClassLev1"></td> <td>중분류</td> <td><input id="shCiClassLev2"></td> <td>소분류</td> <td><input id="shCiClassLev3"></td> <td>세분류</td> <td><input id="shCiClassLev4"></td> </tr> </table>
[편집] js
Ext.form.Combo의 생성은 기존의 문서를 참조하도록 한다. 일반 텍스트 필드의 경우 다음과 같이 정의한다. getTextField 함수는 앞서 호출한 Ext.jcf.Form에 정의되어 있으므로 따로 함수선언을 하지 않아도 된다.
//1 . 입력 값 정의
fmCiClassName = getTextField('shCiClassName', 120, 20);
fmCiClassLevel = getTextField('shCiClassLevel', 120, 20);
fmCompCode = getTextField('shCompCode', 120, 20);
다음 page 호출시 application/json 형태가 아닌 일반 HttpRequest 형태로 넘어가므로, 이 값들을 저장하고 있다가 넘겨줄 수 있도록 아래의 처리를 추가한다.
//2. 다음 paging 처리시 넘겨줘야 할 param 값을 Ext.jcf.HiddenForm에 담는다.
fmSrchForm = new Ext.jcf.HiddenForm('/dsom/comCiMng/allComCiMngs.action', [fmCiClassName,fmCiClassLevel,fmCompCode,ciClassLevel1,ciClassLevel2,ciClassLevel3,ciClassLevel4])
setFormPanelElements(false,fmSrchForm);
Ext.jcf.HiddenForm은 이후 호출할때의 주소와 넘겨줄 값들에 대해 정의한 것이며,
이것을 FormPanel로 등록하도록 한다.
[편집] Column 정보 생성
화면의 그리드상에 보여줄 컬럼에 대한 정의를 한다. Ext.jcf.ColumnConfig를 이용하여 정의하며, add("헤더명","실제 보여줄 attribute값",사이즈,정렬)이 기본이다.
var config = new Ext.jcf.ColumnConfig();
config.add("분류ID",'ciClassId', 25,'center');
config.add("분류명",'ciClassName',250, 'left', null, null, new Ext.form.TextField({allowBlank: false,maxLength:153}));
config.add("분류레벨", 'ciClassLevel', 25,'center');
config.add("상위분류", 'upperCiClassId',25,'center');
config.add("사용여부", 'activeFlag', 15,'center');
config.add("고객사",'compCode', 90,'center');
config.add("비고", 'ciClassDesc', 150,'center');
분류명과 같이 에디팅이 필요한 항목일 경우 에디터(Ext.form.TextField)를 추가한다. config.add("분류명",'ciClassName',250, 'left', null, null, new Ext.form.TextField({allowBlank: false,maxLength:153}));
[편집] Grid 선언
Ext.jcf.Grid를 선언하는데, 이때 페이징일 경우 type을 paging으로 선언한다.
grid = new Ext.jcf.Grid({
'''type: 'paging'''', //'basic', 'detail'
single: true,
width: 'auto',
height: 180,
clicksToEdit:1,
paging: {
'''store: ciStore''',
display: 'text',
value: 'value',
xtype: 'bbar'
},
panel: {
title: '',
render: 'ciMngList',
width: 'auto',
height: 260,
resize: true
},
listeners: {//그리드 관련 이벤트 정보
beforeedit : function(e) {
var action = e.record.get(ACTION_FIELD);
if(action == DELETE_RECORD) return false;
},
validateedit : function (e){
if (e.field == 'ciClassName'){
var val = e.value.toUpperCase();
}
},
afteredit : function(e) {
editRecord(e.record);
e.record.set(e.field, e.value.toUpperCase());
},
rowclick: function(grid, index) {
var record = grid.getStore().getAt(index);
selectedRecord = record;
}
},
columns: config.getConfig()
});
[편집] 레코드 정의
//3-3. CI분류 Records 정의
var CiClass = Ext.data.Record.create([
{name: 'flag', type: 'string'},
{name: 'ciClassId', type: 'string'},
{name: 'ciClassName', type: 'string'},
{name: 'ciClassLevel', type: 'string'},
{name: 'upperCiClassId',type: 'string'},
{name: 'compCode', type: 'string'},
{name: 'activeFlag', type: 'string'},
{name: 'ciClassDesc', type: 'string'}
]);
[편집] Store 정보 생성
JsonStore를 생성하여 앞서 정의한 record를 field를 지정하고, listener에 loadStoreBaseParams를 추가하면서 처음 선언한 HiddenForm을 담도록 한다.
//3-4. Paging 데이터 바인딩을 위한 Store 정의
ciStore = new Ext.data.JsonStore({
url: '/dsom/comCiMng/allComCiMngsForPaging.action',
root:'allCiClass.list',
totalProperty: 'allCiClass.totalSize',
id: 'ciClassId',
forceFit :true,
fields:CiClass,
listeners:{
beforeload:function(store){
loadStoreBaseParams(store,fmSrchForm);
}
}
});
[편집] Grid 생성
grid를 생성하면서 jsonStore를 담는다.
// 4. Grid 생성 grid.create(ciStore);
