PDA

View Full Version : change records using the set() method



Speedy
23 Aug 2011, 1:08 AM
Hi,


I use a grid with a store that is manually loaded via ajax, that is why i use a memory store.
Manually my grid has a method that shall change some values via script.




var store = Ext.create('Ext.data.Store', {
fields: ['value', 'display', 'visible', 'isDefault' ], autoLoad: true,
data: [
{ value: 'A', display: ' Display A', visible: false, isDefault: false },
{ value: 'B', display: 'Display B' visible: false, isDefault: false },
{ value: 'C', display: 'Display C', visible: false, isDefault: false }
],
proxy: {
type: 'memory',
reader: { type: 'json', root: 'data', idProperty: 'value' }
}
});



the method that shall edit the store is trying to do f.e.



var rec = grid.getStore().findRecord( 'value', 'A' );
rec.set('isDefault', true);


after this line of code the following error is thrown by firebug

d is undefined
d.parentNode.insertBefore(replacement, d); ext-debug.js( 16037 )


I tried to debug and it looks like this error happens when the grid view wants to update the grid-rows somehow.

Even more weird is, if I use


rec.data.isDefault = true;

instead of the set method the error does not occur.


Someone knows what is going wrong here?



thanks,

Speedy

skirtle
23 Aug 2011, 2:37 AM
Exact ExtJS version?

Tried it in different browsers?

Grid config?

Speedy
23 Aug 2011, 2:47 AM
4.0.2a

tried with Firefox 5 only

the file extends the grid and the config is applied within the initComponent method





Ext.apply(this, {
store: store,
plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ],
selType: 'cellmodel',
columns: [{
name: 'display', dataIndex: 'display'
},{
name: 'visible', dataIndex: 'visible', header: 'Visible'
},{
name: 'default', dataIndex: 'isDefault', header: 'Default'
}]
});
this.callParent(arguments);

jay@moduscreate.com
23 Aug 2011, 11:12 AM
OK, your problem is *not* the Store:





Ext.require('Ext.data.Store');


Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['value', 'display', 'visible', 'isDefault' ],
autoLoad: true,
data: [
{ value: 'A', display: ' Display A', visible: false, isDefault: false },
{ value: 'B', display: 'Display B', visible: false, isDefault: false },
{ value: 'C', display: 'Display C', visible: false, isDefault: false }
],
proxy: {
type: 'memory',
reader: { type: 'json', root: 'data', idProperty: 'value' }
}
});

var rec = store.findRecord( 'value', 'A' );

rec.beginEdit();
rec.set('isDefault', true);
rec.endEdit();
rec.commit();
console.log(rec.data)

});

That works fine.

jay@moduscreate.com
23 Aug 2011, 11:21 AM
The problem is actually in the panel.Table class itself

It's fixed in Ext JS 4.0.6 (to be released in the future). I highly suggest you consider looking at better formatted code and learn to do so.

Ext.require(['Ext.data.Store', 'Ext.grid.Panel', 'Ext.grid.plugin.CellEditing']);

Ext.onReady(function () {
var store = Ext.create('Ext.data.Store', {
fields: ['value', 'display', 'visible', 'isDefault'],
autoLoad: true,
data: [{
value: 'A',
display: ' Display A',
visible: false,
isDefault: false
}, {
value: 'B',
display: 'Display B',
visible: false,
isDefault: false
}, {
value: 'C',
display: 'Display C',
visible: false,
isDefault: false
}],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data',
idProperty: 'value'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 200,
width: 400,
store: store,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
selType: 'cellmodel',
columns: [{
name: 'display',
dataIndex: 'display'
}, {
name: 'visible',
dataIndex: 'visible',
header: 'Visible'
}, {
name: 'default',
dataIndex: 'isDefault',
header: 'Default'
}],
buttons: [{
text: 'Do Update',
handler: function () {
var rec = store.findRecord('value', 'A');

rec.beginEdit();
rec.set('isDefault', true);
rec.endEdit();
rec.commit();
console.log(rec.data)

}
}]

});


});

Speedy
23 Aug 2011, 10:38 PM
thanks for the try but the beginEdit(), endEdit(), commit() doesnt work.

I tried that before too



console.log('Before End Edit');
rec.endEdit();
console.log('End Edit done');
rec.commit();
console.log('Commit done');


the only output before the error is the 'Before End Edit'

bodyboarder20
24 Aug 2011, 3:54 AM
@Speedy


The problem is actually in the panel.Table class itself

It's fixed in Ext JS 4.0.6 (to be released in the future).