<#ftl encoding="utf-8">
<#--
File Name : indexComboEdit.ftl
Sub-System Name : GRID 목록조회
Description : GRID 목록조회
최종작성일 : 2012.10.11
최종작성자: 윤혁신
-->
<script language="javascript" type="text/javascript">
var mainJsonStore; // 목록조회 Json Store
var mainGrid; // 목록조회 Grid
Ext.onReady(function(){
// 1. 데이터 모델 정의 JSON 데이터
Ext.define('MainJsonList', {
extend: 'Ext.data.Model',
fields: [
{name: 'cust_id', mapping: 'cust_id'},
{name: 'cust_nm', mapping: 'cust_nm'},
{name: 'cpy_telno', mapping: 'cpy_telno'},
{name: 'email', mapping: 'email'},
{name: 'code1'},
{name: 'code2'},
{name: 'code3'},
{name: 'code4'}
]
});
// 1-1. 공통코드(콤보박스) 모델 정의 JSON 데이터
Ext.define('CodeJsonList', {
extend: 'Ext.data.Model',
fields: [
{name: 'code', mapping: 'code'},
{name: 'code_nm', mapping: 'code_nm'}
]
});
// 2. Store 정의
mainJsonStore = Ext.create('Ext.data.Store', {
model: 'MainJsonList', // 선언한 모델 정의..
remoteSort: true,
proxy: {
type: 'ajax',
url: '<@spring.url "/sample/grid/listGridNpSamplePrc.do" />',
headers: { 'Accept': 'application/json' },
reader: {
root: 'listGridSample' // JSON 데이터의 ROOT
}
}
});
// 2-1. CODE Store 정의
var codeJsonStore1 = Ext.create('Ext.data.Store', {
//autoLoad : false,//페이지 로딩시 자동 loading여부
model: 'CodeJsonList', // 선언한 모델 정의..
//remoteFilter : true,
proxy: {
type: 'ajax',
url: '<@spring.url "/common/listCodePrc.do" />',
headers: { 'Accept': 'application/json' },
reader: {
root: 'listCode'
}
}
});
codeJsonStore1.load({ params : { parent_cd :'C022' },callback : function() {}});
// 2-2. CODE Store 정의
var codeJsonStore2 = Ext.create('Ext.data.Store', {
//autoLoad : false,//페이지 로딩시 자동 loading여부
model: 'CodeJsonList', // 선언한 모델 정의..
//remoteFilter : true,
proxy: {
type: 'ajax',
url: '<@spring.url "/common/listCodePrc.do" />',
headers: { 'Accept': 'application/json' },
reader: {
root: 'listCode'
}
}
});
// 2-3. CODE Store 정의
var codeJsonStore3 = Ext.create('Ext.data.Store', {
//autoLoad : false,//페이지 로딩시 자동 loading여부
model: 'CodeJsonList', // 선언한 모델 정의..
//remoteFilter : true,
proxy: {
type: 'ajax',
url: '<@spring.url "/common/listCodePrc.do" />',
headers: { 'Accept': 'application/json' },
reader: {
root: 'listCode'
}
}
});
//CellEditing 선언
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
// 3. 리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
id : 'main_grid',
width: '100%',
//height : 145,
store: mainJsonStore,
columnLines: true,
disableSelection: false,
sortableColumns: false,
loadMask: true,
viewConfig: {
trackOver: true,
stripeRows: true,
forceFit: false
},
// grid columns
columns:[
{
header : 'cust_id',
dataIndex : 'cust_id',
hidden : true
}, {
header : "고객명",
dataIndex : 'cust_nm',
width : 80,
align : 'center',
editor : {
xtype: 'textfield',
allowBlank : false
}
}, {
header : "전화",
dataIndex : 'cpy_telno',
width : 110,
editor : {
xtype: 'textfield',
allowBlank : false
}
}, {
header : "메일",
dataIndex : 'email',
flex : 1,
editor : {
xtype: 'textfield',
allowBlank : false
}
}, {
header : "콤보선택1",
dataIndex : 'code1',
align : 'center',
width : 150,
editor: {
xtype: 'combobox',
triggerAction: 'all',
selectOnTab: true,
store: codeJsonStore1,
queryMode: 'local',
listeners: {
select: function(combo, record, index) {
cellEditing.completeEdit();
}
},
valueField: 'code',
displayField: 'code_nm',
editable: false
},
renderer: function(value){
var index = codeJsonStore1.findExact('code',value);
if (index != -1){
rs = codeJsonStore1.getAt(index).data;
return rs.code_nm;
}
}
}, {
header : "콤보선택2",
dataIndex : 'code2',
align : 'center',
width : 150,
editor: {
xtype: 'combobox',
triggerAction: 'all',
selectOnTab: true,
store: codeJsonStore2,
queryMode: 'local',
listeners: {
focus : function( hat,the,e ){
var selection = mainGrid.getView().getSelectionModel().getSelection()[0];
//console.log("code2 : " + selection.get('code1'));
if(selection.get('code1') == ''){
Ext.Msg.alert("알림", "이전 단계를 선택하세요.",function(btn,txt){
/*
if(btn == 'ok'){
var plugin = mainGrid.getPlugin('cellplugin');
plugin.startEdit(selection, 3);
}
*/
});
return false;
}else{
codeJsonStore2.load({ params : { parent_cd :selection.get('code1') },callback : function() {}});
}
},
select: function(combo, record, index) {
cellEditing.completeEdit();
}
},
valueField: 'code',
displayField: 'code_nm',
editable: false
},
renderer: function(value){
var index = codeJsonStore2.findExact('code',value);
if (index != -1){
rs = codeJsonStore2.getAt(index).data;
return rs.code_nm;
}
}
}, {
header : "콤보선택3",
dataIndex : 'code3',
align : 'center',
width : 150,
editor: {
xtype: 'combobox',
triggerAction: 'all',
selectOnTab: true,
store: codeJsonStore3,
queryMode: 'local',
listeners: {
focus : function( hat,the,e ){
var selection = mainGrid.getView().getSelectionModel().getSelection()[0];
if(selection.get('code2') == ''){
Ext.Msg.alert("알림", "이전 단계를 선택하세요.",function(btn,txt){
/*
if(btn == 'ok'){
var plugin = mainGrid.getPlugin('cellplugin');
plugin.startEdit(selection, 3);
}
*/
});
return false;
}else{
codeJsonStore3.load({ params : { parent_cd :selection.get('code2') },callback : function() {}});
}
},
select: function(combo, record, index) {
cellEditing.completeEdit();
}
},
valueField: 'code',
displayField: 'code_nm',
editable: false
},
renderer: function(value){
var index = codeJsonStore3.findExact('code',value);
if (index != -1){
rs = codeJsonStore3.getAt(index).data;
return rs.code_nm;
}
}
}
],
renderTo: 'div_mainlist_grid', // 그리드에 매핑하는 DOM 객체 (DIV 태그)
plugins: [cellEditing]
});
//목록조회 Grid load
fncGoSearch();
// 목록 Grid size reload
$(window).resize(function () {
var width = $(window).width();
mainGrid.setWidth(width - 55);
});
}) // Ext.onready End
/**
* Function Name : fncGoSearch()
* Description : 조회 및 검색
*/
function fncGoSearch() {
mainJsonStore.load({
params:{ },
callback: function () {
var count = mainGrid.getStore().getTotalCount();
window.onload =fncIframeResizeGrid(count);
}
});
}
</script>
<!-- 설명-->
<div>
- combobox를 선택하면 다음 combobox는 이전 combobox와 연관된 내역만 출력된다.<br>
- combobox마다 Store는 별도로 생성한다.<br>
<br>
</div>
<!-- //설명 -->
<!-- 리스트 테이블 시작 -->
<div class="grid_box mt5">
<div id="div_mainlist_grid"></div> <!-- 그리드가 매핑되는 영역 -->
</div>
댓글 없음:
댓글 쓰기