PDA

View Full Version : grid editor combobox make updates even no data changed



Richie1985
30 Jul 2015, 3:35 AM
hi,

i have a combobox cell editor in my grid like this:

http://i.imgur.com/HwCaSiw.png

it works well, but it fires also updates after blur the combobox even no data changes, why?

here firebug:

http://i.imgur.com/9iTE48H.png

Richie1985
2 Aug 2015, 11:57 PM
has nobody a idea?

Gary Schlosberg
3 Aug 2015, 4:28 PM
Hard to say without seeing any code. Can you post the code for the combo?

Richie1985
6 Aug 2015, 4:32 AM
okay here ist the combo editor:


this.editors = {
'combo' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox',
{
triggerAction: 'all',
multiSelect: true,
delimiter: ',',
mode: 'SIMPLE',
forceSelection: true,
store: new Ext.data.JsonStore({
fields: [
{mapping: 'id',name: 'id', type: 'string'},
{mapping: 'value',name: 'value', type: 'string'}
]
}),
allowBlank: true,
queryMode: 'remote',
displayField: 'value',
valueField: 'id',
editable: false,
listeners:{
scope: this,
'select': function(c, r, eopts){
console.log('select',c, r, eopts);
c.ownerCt.completeEdit();

},
'focus': function(c, r, eopts){
console.log('focus',c, r, eopts);
c.expand();
},
'blur': function(c, r, eopts){
console.log('blur',c, r, eopts);
}
},
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {value} </div>';
}
}
}

)}),


here the render function:


this.renderCell = function(val, meta, rec) {
//console.log('render',val);
if(rec.get('type')=='combo'){
console.log('render',val);
var s = [];
var values = Ext.decode(rec.data.values);
Ext.each(val, function(v){
for (var i = 0; i < values.length; i++) {
if (values[i]['id'] == v) {
s.push(values[i]['value']);
}
}

});
return s.join(",");
};
if(rec.get('type')=='date'){
if(Ext.isDate(val)){
return Ext.Date.format(val,'d.m.Y');
}

};

function getcelleditor:


this.getCellEditor = function(record, column) {
console.log('getCellEditor',record, column);
var editors = this.editors[record.get('type')];
if(record.get('type')=='combo'){
editors.items.items[0].getStore().loadRawData(Ext.decode(record.data.values));
}
return editors;
};



and the grid:


Ext.apply(this, {
store: Ext.create('Ext.data.Store', {
autoLoad: false,
autoSync: true,
model: 'other',
listeners:{
scope: this,
//single: true,
'change': function(t,newValue, oldValue, eOpts ){
console.log('change_store',t,newValue, oldValue, eOpts);

}, 'datachanged': function(t ){
console.log('datachanged_store',t);

},
'afteredit': function(modifiedFieldNames){
console.log('afteredit_store',modifiedFieldNames);

},
'update': function(t,record, operation, modifiedFieldNames, eOpts ){
console.log('update_store',t,record, operation, modifiedFieldNames, eOpts);

}
},
proxy: {
type: 'ajax',
api: {
read : 'data/other.php?action=getother&userid='+this.userid,
update : 'data/other.php?action=setother&userid='+this.userid,
create : 'data/other.php?action=createtrainings&userid='+this.userid,
destroy : 'data/other.php?action=deletetrainings&userid='+this.userid
},
reader: {
type: 'json',
root: 'other'
},
writer: {
type: 'json',
writeAllFields: true
},listeners: {
scope: this,
exception: function(proxy, response, options) {
if(Ext.decode(response.responseText).type=='read'){
this.setLoading(Ext.decode(response.responseText).message);
}else{
Ext.MessageBox.show({
title: 'Achtung',
msg: Ext.decode(response.responseText).message,
buttons: Ext.MessageBox.OK,
animateTarget: this
});
this.store.rejectChanges();
}
}
}
}

}),
layout: 'fit',
hideHeaders: true,

listeners:{
scope: this,
'afteredit': function(modifiedFieldNames){
console.log('afteredit_grid',modifiedFieldNames);

},
'change': function(t,newValue, oldValue, eOpts ){
console.log('change_grid',t,newValue, oldValue, eOpts);

},
'update': function(t,record, operation, modifiedFieldNames, eOpts ){
console.log('update_grid',t,record, operation, modifiedFieldNames, eOpts);

}
},
plugins: [this.cellEditing],
columns: {
items: [
{
dataIndex: "id",
hidden:true
},{
dataIndex: "name"
},{
xtype: 'componentcolumn',
dataIndex: 'value'
,renderer: Ext.Function.bind(this.renderCell, this)
,getEditor: Ext.Function.bind(this.getCellEditor, this)
}
] ,
defaults: {
flex: 1
}
}
});


it seems that a combobox celleditor update the grid value every time when the combobox blur event. als if the value of the combobox is NOT changed

Richie1985
6 Aug 2015, 6:49 AM
i dont know why, but this is working:


this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
,listeners: {
'validateedit': function(ed,e){
if(Array.isArray(e.value)){
if(e.record.data[e.field].equals(e.value)){
e.cancel = true;
}
}
}
}
});

it seems that the valid function in CellEditing Plugin not able to to check if array equals array :)