PDA

View Full Version : combobox in grid column's row editor fire 'select' event only once..



minjuny
6 Sep 2012, 6:46 PM
I have grid with rowediting plug-in, and it's editor have 3 combobox.
3 combo-boxes are dependent for example, when user select first combo box, we have to clear second combo-box and load new data from server. And then user can select sencond combo box,....

So, I'd try to make 'select' event listener for first and second combox. But this select lisenter didn't be fired after first time selection.

Furthermore, I tried with 'change' event also, but I could get same result.

below is the my full source code w/o model, store


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();
}
}
});

scottmartin
7 Sep 2012, 10:21 AM
Duplicate post:
http://www.sencha.com/forum/showthread.php?241519