Code:
Ext.define('Master.view.organ.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.organlist',
autoScroll: true,
setLoading: true,
shortColumn: false,
requires: [
'Ext.grid.*',
'Ext.data.*',
'Ext.selection.CheckboxModel',
],
initComponent: function () {
var me = this;
cateStore1 = Ext.create('Master.store.OrganCategories'),
cateStore2 = Ext.create('Master.store.OrganCategories'),
cateStore3 = Ext.create('Master.store.OrganCategories');
var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit:1,
autoCancel: false
});
Ext.apply(this, {
plugins: rowEditor,
store: 'Organs',
columnLines: true,
columns: [{
text: 'idx',
dataIndex: 'organ_idx',
width: 30
}, {
text: '대분류',
dataIndex: 'category1',
width: 70,
renderer: function (value, metaData, record, row, col, store, gridView) {
return record.get('category1_name');
},
editor: {
xtype: 'combo',
allowBlank: false,
itemId: 'category1',
store: cateStore1,
displayField: 'title',
valueField: 'co_idx',
editable: false,
listConfig: {
loadingText: '읽는 중',
emptyText: '분류가 없습니다.'
},
}
}, {
text: '중분류',
dataIndex: 'category2',
displayField: 'category2_name',
width: 50,
renderer: function (value, metaData, record, row, col, store, gridView) {
return record.get('category2_name');
},
editor: {
xtype: 'combo',
itemId: 'category2',
store: cateStore2,
displayField: 'title',
valueField: 'co_idx',
editable: false,
listConfig: {
loadingText: '읽는 중',
emptyText: '분류가 없습니다.'
},
}
}, {
text: '소분류',
dataIndex: 'category3',
displayField: 'category3_name',
width: 90,
renderer: function (value, metaData, record, row, col, store, gridView) {
return record.get('category3_name');
},
editor: {
xtype: 'combo',
itemId: 'category3',
store: cateStore3,
displayField: 'title',
valueField: 'co_idx',
editable: false,
listConfig: {
loadingText: '읽는 중',
emptyText: '분류가 없습니다.'
},
}
}, {
text: '카테고리 추가',
dataIndex: 'category_text',
width: 100,
editor: {
xtype: 'textfield'
}
}, {
text: '교육기관 이름',
dataIndex: 'name',
editor: {
xtype: 'textfield',
}
}, {
text: '사업자 번호',
dataIndex: 'business_regnum',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: '법인 번호',
dataIndex: 'corporation_regnum',
editor: {
xtype: 'textfield'
}
}, {
text: '설립자 이름',
dataIndex: 'founder',
editor: {
xtype: 'textfield',
allowBlank: false
}
} ,{
text: '대표 전화번호',
dataIndex: 'phone',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: '대표 이메일',
dataIndex: 'email',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: '팩스',
dataIndex: 'fax',
editor: {
xtype: 'textfield'
}
}, {
text: '주소',
dataIndex: 'address',
editor: {
xtype: 'textfield',
allowBlank: false
}
// }, {
// text: '설립일',
// dataIndex: 'found_date',
// editor: {
// xtype: 'datefield',
// allowBlank: false
// }
}, {
text: '홈페이지',
dataIndex: 'website',
editor: {
xtype: 'textfield'
}
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text:'교육기관 추가',
tooltip:'새로운 교육기관을 추가합니다.',
action: 'add',
handler:function () {
var store = me.getStore();
rowEditor.cancelEdit();
var r = Ext.create('Master.model.Organ');
store.insert(0, r);
rowEditor.startEdit(0, 0);
}
}, '->', {
text:'교육기관 삭제',
tooltip:'교육기관을 삭제합니다. 되돌릴 수 없습니다.',
action: 'delete',
handler:function () {
var store = me.getStore();
rowEditor.cancelEdit();
store.remove(me.getSelectionModel().getSelection());
store.sync();
}
}]
}, {
xtype: 'pagingtoolbar',
store: 'Organs',
dock: 'bottom',
displayInfo: true
}]
});
this.callParent(arguments);
},
// Template Functions
afterRender: function () {
var me = this;
this.callParent(arguments);
// 데이터베이스를 읽어온다.
this.reloadList(false);
this.on('beforeedit', me.beforeEditing);
this.on('edit', me.endEditing);
this.on('canceledit', me.cancelEditing);
},
// Interface함수: Controller에서 호출한다.
reloadList: function (clearpage) {
var store = this.getStore();
if (clearpage) {
store.loadPage(1);
} else {
store.load();
}
},
beforeEditing: function (editor, e, opts) {
console.log(editor);
var record = e.record,
combo1Idx = record.get('category1'),
combo2Idx = record.get('category2');
var form = editor.editor.form,
combo1 = form.findField('category1'),
combo2 = form.findField('category2'),
combo3 = form.findField('category3');
var combo2Store = combo2.getStore(),
combo2Proxy = combo2Store.getProxy();
var combo3Store = combo3.getStore(),
combo3Proxy = combo3Store.getProxy();
// 기본적으로 현재 상태로 각 스토어의 extraParams를 설정하도록 한다.
combo2Proxy.extraParams = { parent: combo1Idx };
combo2Store.load();
combo3Proxy.extraParams = { parent: combo2Idx };
combo3Store.load();
combo1.on('select', function (combo, records, opts) {
console.log('combo1 select handler is called');
combo2.clearValue();
combo2.enable();
combo2Proxy.extraParams = { parent: records[0].get('oc_idx') };
combo3.clearValue();
combo3.disable();
combo2Store.load();
} );
combo2.on('select', function (combo, records, opts) {
console.log('combo2 select handler is called');
combo3.clearValue();
combo3.enable();
combo3Proxy.extraParams = { parent: records[0].get('oc_idx') };
combo3Store.load();
});
},
endEditing: function (editor, e, opts) {
console.log(e);
temp = e.record;
this.getStore().sync();
},
cancelEditing: function (editor, e, opts) {
if(e.record.get('organ_idx') == 0) {
this.getStore().remove(e.record);
this.getStore().sync();
}
}
});
Unanswered: combobox in grid column's row editor fire 'select' event only once..
Reply With Quote
