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